react-router-dom 相关问题

我无法在 MERN Stack 中使用 History.push() 重新连接

我希望你一切都好。 我正在尝试使用 MERN Stack 来完成电子邮件身份验证系统。 然后单击验证电子邮件后，用户必须处于活动状态并且页面必须重定向到 l...

useNavigate 不会替换我的动态参数

在我们的项目中，我们使用的是react-router版本4，我们已经迁移到版本6。 然而，自从 useLocation API 更改为

对 BrowserRouter 组件中的无效 Hook 调用警告做出反应

react.development.js:209 警告：无效的钩子调用。钩子只能在函数组件的主体内部调用。发生这种情况可能是由于以下原因之一： 你可能不匹配...

结合使用react useState和useLoaderData会抛出无限循环错误

初始情况： 我有一个元素“root”，它在每次调用时检查用户是否经过身份验证。我目前正在尝试新的 React-Router V6 并遇到了如此-

带有完整url的react router dom链接组件

“Link to="https://example.com/CONTACT"> 和“link to="/CONTACT"> 是相同的，因为传递到链接组件的链接来自后端

有没有办法在路由器 dom 6.8（6.4 以上）中使用具有成帧器运动动画存在的退出动画？

在 BrowserRouter 的早期版本中，我可以使用 animatePresence 包装路由，并允许退出动画。 但现在使用 createBrowserRouter 它会给出错误，因为 animatePresence ...

用户无法使用 authContext 通过 ProtectedRoute 登录

我正在为我的应用程序中的受保护路由探索基于 authContext 的登录方法。我创建了以下配置来支持它： AuthContext.jsx 导入 React, { createContext, useContext,

React Router 如何使用从加载器返回的数据

我正在努力实现一个新的 React Router。我正在使用新的 createBrowserRouter 并想要实现一些 loader api 调用。我已经设置了我的项目来正确地进行这些 api 调用，但是......

react-router v6 动态路径正则表达式

在react-router v5中，我能够通过以下方式指定一组特定的动态路径属性： '/some-path/:someDynamicProperty(value1|value2|value3)' 因此，唯一现有的选择...

react-router v6 动态路径联合

在react-router v5中，我能够通过以下方式指定一组特定的动态路径属性： '/some-path/:someDynamicProperty(value1|value2|value3)' 因此，唯一现有的选择...

react-router v6 <Route />组件不允许我将<Navigate />渲染为元素

我正在尝试为我的应用程序创建受保护的路线，但路线组件似乎不接受作为元素。我试图： 进口 { BrowserRouter 作为路由器， 导航， 路线， 路线， } 来自 '反应-

当我导航时，它当前滚动到目标页面上的页面底部[重复]

当我导航时，它当前滚动到目标页面的页面底部。但是，我希望它导航到页面顶部。 常量导航 = useNavigate(); 常量

路由器被忽略[关闭]

版本： “反应”：“^18.0.0”， "react-dom": "^18.0.0", "react-router-dom": "^6.19.0", 代码： 导出默认函数 Board() { <

React Router Dom 有条件渲染元素

我正在建立一个新项目并使用最新版本的react-router-dom。他们的文档建议使用我正在努力实现的 createBrowserRouter 。 我想要实现的是

Redux 状态更改不会根据逻辑重新渲染组件

我有一个带有 Redux 的 React 应用程序（Vite），用于全局状态管理。我在 Redux 存储中有一个名为 auth of boolean 的全局状态，当用户正确注册时，它会通过调度程序更新...

React-router-dom 链接在页面顶部打开

所以我觉得问这个问题很愚蠢，但找不到直接的答案。 我是否需要提供任何 css 参数或直接提供给 以便我的 React 应用程序上的页面在 t...

aws-amplify/ui-reac，登录后可以重定向

您好，我正在尝试使用AWS-amplify和react-dom登录后重定向并更改我的路径 我需要在用户登录后将它们重定向到 localhost/main main 因为它位于 localhost/ 如果有的话...

使用react-router-dom v6.0.2检测用户离开页面

我试图在导航到 ReactJS Web 应用程序中的其他路线或页面之前显示未保存更改的对话框。我尝试了 Stackoverflow 的不同解决方案，但没有成功。大部分解决方案

我使用react-router-dom版本6创建了react应用程序社交媒体平台

我在登录页面中有 isAuth 功能，可以检查用户是否经过身份验证，但我面临着这个错误，但没有得到它。 这是错误 意外的应用程序错误！ 无效

React Router v6 404 / 带基本名称的通配符路由

我正在尝试使用 React Router v6 实现一个应用程序路由器，其基本名称为 /foo： 导出常量 appRouter = createBrowserRouter( 从元素创建路由（ 我正在尝试使用 React Router v6 实现一个应用程序路由器，它有一个基本名称/foo： export const appRouter = createBrowserRouter( createRoutesFromElements( <Route element={<Layout />}> <Route path="/login" element={<Login />} /> <Route path="/requestAccess" element={<RequestAccess />} /> <Route element={<PrivateRoutes />}> <Route path="/createEvent" element={<CreateEvent />} /> <Route index element={<Dashboard />} exact /> <Route path="/admin-console" element={<UserAdminDashboard />} exact /> <Route path="/view-previous" element={<ViewPastEvent />} exact /> </Route> </Route> ), { basename: "/foo", } ); 我想用 捕获 404，以便像 localhost:5000/bar 这样的路径会重定向到 localhost:5000/foo，但我的所有路由都作为 /foo 的子级存在，所以我不确定如何实现 404捕获 localhost:5000/foo/this-route-is-a-404 以及 localhost:3000/bar/bar-is-not-the-basename-of-this-app。 我尝试添加 <Route path="*" element={<Navigate to="/foo"/>}/> 作为 <Route element={<Layout />}> 的同级元素，但 createRoutesFromElements() 只需要一个根元素。 如有任何帮助，我们将不胜感激。我在 React Router 文档中找不到任何有助于解决此问题的内容。 我想用 <Route path="*" element={}/> 捕获 404，所以 像 "localhost:5000/bar" 这样的路径会重定向到 "localhost:5000/foo"，但我所有的路线都作为 "/foo" 当应用程序从 "/foo" 目录托管时，应用程序和路由器将相对于该路径运行。服务器需要将页面请求从 "/" 重定向到 "/foo"，以将其“引导”到您的应用程序中。您如何处理此问题取决于您的服务器环境或托管服务。 当您运行 localhost 时，您通常只需在启动应用程序后手动导航，因为应用程序是从 root 运行的 "/"。 我尝试添加 <Route path="*" element={<Navigate to="/foo" />} /> 作为 <Route element={<Layout />}> 的兄弟姐妹，但是 createRoutesFromElements() 只需要一个根元素。 您可以在 React.Fragment 组件中渲染同级路由。 export const appRouter = createBrowserRouter( createRoutesFromElements( <> <Route element={<Layout />}> <Route path="/login" element={<Login />} /> <Route path="/requestAccess" element={<RequestAccess />} /> <Route element={<PrivateRoutes />}> <Route index element={<Dashboard />} /> // <-- "/" <Route path="createEvent" element={<CreateEvent />} /> <Route path="admin-console" element={<UserAdminDashboard />} /> <Route path="view-previous" element={<ViewPastEvent />} /> </Route> </Route> <Route path="*" element={<Navigate to="/" replace />} /> // <-- redirect to "/" home path </> ), { basename: "/foo" } ); 但是由于重定向到 "/" 不会在视觉上呈现任何内容，因此没有理由将其呈现在 Layout 布局路线之外。在布局路线中渲染重定向应该同样有效。 export const appRouter = createBrowserRouter( createRoutesFromElements( <Route element={<Layout />}> <Route path="/login" element={<Login />} /> <Route path="/requestAccess" element={<RequestAccess />} /> <Route element={<PrivateRoutes />}> <Route index element={<Dashboard />} /> <Route path="createEvent" element={<CreateEvent />} /> <Route path="admin-console" element={<UserAdminDashboard />} /> <Route path="view-previous" element={<ViewPastEvent />} /> </Route> <Route path="*" element={<Navigate to="/" replace />} /> </Route> ), { basename: "/foo" } );