react-router 相关问题

在Reactjs中使用链接状态通过路由组件传递数据并添加到数组中

在我的 Add.js 组件中，我正在获取表单数据，我将通过 Link 元素发送到我的 List.js 组件并使用 useLocation 来获取它。然后我创建一个新的空数组并推送 lis...

使用React Router v6的空白页面没有匹配位置的路由

您好，我在“react-router-dom”方面遇到了一些问题，如果有人可以帮助我，那就太好了。 以下是代码： 索引.js 从“反应”导入反应； 从 'react-dom/

在 React Router 中重定向所有没有根文件夹的路径匹配

我正在使用react-router-dom版本6.3.0，我试图让我的路由器处理更新的URL结构。 例如，我的旧路线如下所示： 我正在使用 react-router-dom 版本 6.3.0，我正在尝试让我的路由器处理更新的 URL 结构。 举个例子，我的旧路线如下所示： <Route path='animals/dog' element={<Dog />} /> <Route path='animals/cat' element={<Cat />} /> <Route path='animals/bird/songs' element={<BirdSongs />} /> 我希望它们在没有根文件夹的情况下自动重定向animals： <Route path='dog' element={<Dog />} /> <Route path='cat' element={<Cat />} /> <Route path='bird/songs' element={<BirdSongs />} /> 所有内容都需要重定向到之前所在的位置，但我不想在我的应用程序中为每个可能的Route手动编写重定向。 React Router 可以做到这一点吗？在我的情况下，我无法使用 .htaccess 或 301 重定向。它必须发生在 React Router 本身中。 似乎已经回答了：https://stackoverflow.com/a/43533070/14258470 希望这有帮助！ 如果这不是您正在寻找的答案，请提供更多背景信息，我会调整我的答案以更好地适应OP。

React Router 路由不适用于 MUI Drawer 和 Redux Toolkit

将 Material UI 组件 Drawer 与 React Router 结合使用，使用 Redux Toolkit 管理全局状态。当我单击抽屉中的 NavLinks 时，它会更改不一致的路线。有时它有效，有时你......

ReactJS 路由器选项和嵌套路由中的 splats

我有以下嵌套路线： 从元素创建路由（<> }&...

使用react-router v6我需要一个导航栏永久存在，但无法在我的索引页面上同时显示<App/>和<Home/>，如何修复？

我正在用React重建我的个人网站，并决定使用最新版本的react-router-dom，我正在构建我的应用程序组件来包含导航栏，然后在我想要的内容下面

Reactjs 路由器中的“通配符”

我建立了以下路线： 常量路由器 = createBrowserRouter( 从元素创建路由（<> }> &l...

使用 useParams 路由失败

我正在做一个小型汽车网上商店项目。我正在尝试获取 当用户单击“更多详细信息”时，ProductDetails.js 在新页面中呈现 然而，Products.js 失败了，首先我...

如何在类/事件中的 ReactTS 中使用 useNavigate() [重复]

我一直遇到无法浏览组件的问题，我总是收到未捕获错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。 是的，我知道...

在 Render 上部署 React 应用程序后，链接返回 404

我有一个模拟商店 React 应用程序，它有一些不同的路由，可以在本地主机上按预期工作。部署后（在 Surge 和 Render 上），子目录/链接不起作用。 我的404页面doe...

部署 React 应用程序后链接返回 404

我有一个模拟商店 React 应用程序，它有一些不同的路由，可以在本地主机上按预期工作。部署后（在 Surge 和 Render 上），子目录/链接不起作用。 我的404页面doe...

如何为 React Router 配置 Python Tornado？

我正在使用 Tornado 托管一个 React SPA，该 SPA 使用 React Router 进行客户端路由。 一切正常，直到我刷新浏览器中由 React Router 处理的路径（例如 /foo/bar），这

针对 useHistory 钩子模拟 React-router-dom 会导致以下错误 - TS2698：扩展类型只能从对象类型创建

我正在尝试在我的一个测试用例中模拟react-router-dom，以便useHistory钩子能够在我的测试中发挥作用。我决定使用 jest.mock 来模拟整个模块，并使用 jest.requireActual 来pr...

出口无法工作 - 未找到页面 - React 路由器，Vite 5

使用Outlet进行react路由，在使用vite构建或预览后出现页面未找到错误（在开发环境中工作正常） 根.tsx 导出默认函数 Root() { 返回...

如何在React Router v6的loader函数中访问查询参数/搜索参数

我的路线配置如下： const 路由器 = createBrowserRouter([ { 小路： ”/”， 元素: , 孩子们： [ { 索引：true，元素： 我的路线配置如下： const router = createBrowserRouter([ { path: "/", element: <Layout />, children: [ { index: true, element: <Home /> }, { path: "contacts", element: <Contact /> }, { path: "info/:link", element: <FooterLinks /> }, { path: "faq", element: <FAQs /> }, { path: "search", element: <SearchResults />, loader: async ({ params }) => { //NEED ACCESS TO QUERY PARAMETERS HERE }, }, { path: "disease/:id", element: <DiseaseDisplay />, loader: async ({ params }) => { ... }, }, ], }, ]); 有没有办法访问loader函数中的路由中的查询参数？例如，如果路由是 localhost:3000/search?searchTerm=aaa，如何在加载器函数中访问 searchTerm 的值？预先感谢！ 我相信会对你有帮助 { path: "search", element: <SearchResults />, loader: async ({ params, request }) => { const url = new URL(request.url); const searchTerm = url.searchParams.get("q"); return searchProducts(searchTerm); }, },

如何使一个组件既是 BrowserRouter 的子组件又是 React Router v6 中所有路由的父组件（函数语法）？

在React Router v6中，您可以使用组件来定义路由器，如下所示： 导出默认 () => ( ... 在 React Router v6 中，您可以使用组件来定义路由器，如下所示： export default () => ( <BrowserRouter> <MyProvider> <Routes> ... </Routes> </MyProvider> </BrowserRouter> ); 其中 MyProvider 组件能够包装所有路由，同时也是 BrowserRouter 组件的子组件（因此它能够使用像 useNavigate() 这样的 React Router 钩子）。 但是如何使用函数语法复制它，即 const router = createBrowserRouter([ ... ]); export default () => ( <RouterProvider router={router} /> ); 创建一个渲染提供程序组件的布局路由，并将 Outlet 作为其子组件，并且它包装的所有嵌套路由都将渲染到它提供的上下文下的插座中。 示例： const MyProviderLayout = () => ( <MyProvider> <Outlet /> </MyProvider> ); const router = createBrowserRouter([ ... { element={<MyProviderLayout />} children: [ ... routes that access the `MyProvider` context ... ], }, ... other routes ... ]); export default () => ( <RouterProvider router={router} /> );

测试 React 组件时，如何确保我的组件通过带有参数的 url 进行渲染？

我有一个可以通过两个流命中的组件。一条路线是 user/Plan，另一条路线是 user/:userId/Plan。我有组件的不同部分，它们根据我从调用中获得的值进行渲染...

React Router V6 设置

我正在使用 React.js 开发一个小型电子商务应用程序。 在设置路由器 v6 应用程序时，没有任何渲染。即使在 App.js 或 Index.js 中配置路由器也应该有错误。她...

React Router <Navigate>执行不需要的导航

如果用户输入 /movies 路径，浏览器应重定向到 /movies/trending （这是有效的），我这里有这段代码。但是如果用户输入 /movies/popular，用户应该看到 MoviesPopular，但它

React router v6 中的replace: true 不会替换历史记录中的最后一个条目

以下代码不会替换历史堆栈中的最后一项： // 在某个组件内部 常量导航 = useNavigate() // 在钩子或点击处理程序内 导航（'/someroute'，{替换：...