react-router-dom 相关问题

我想要导航中的不同路线，但我不知道如何操作这是我尝试过的常量路由器 = createBrowserRouter( 从元素创建路由（ <> 我想要不同的导航路线，但不知道如何操作这是我尝试过的 const router = createBrowserRouter( createRoutesFromElements( <> <Route path="/" element={<NavBar />}> <Route path="/" element={<LogIn />} /> <Route path="/sign-up" element={<Signup />} /> </Route> <Route path="/" element={<RootLayout />}> <Route path="/" element={<HomePage />} /> </Route> </> )) 在单个路由/路由器配置中，您无法为每个要匹配的 URL 路径呈现多个路由。似乎您基本上想要根据某些用户“身份验证状态”有条件地渲染NavBar、Login和HomePage组件。为此，我建议创建一个受保护的路线组件并执行此条件渲染，将 Login 组件移动到其自己的路线。示例： const ProtectedRoute = () => { const isAuthenticated = /* auth context/state/etc */ return isAuthenticated ? <Outlet /> : <Navigate to="/login" replace />; }; const router = createBrowserRouter( createRoutesFromElements( <> <Route element={<RootLayout />}> <Route element={<ProtectedRoute />}> <Route path="/" element={<HomePage />} /> </Route> </Route> <Route element={<NavBar />}> <Route path="/login" element={<LogIn />} /> <Route path="/sign-up" element={<Signup />} /> </Route> </> ), );

javascript reactjs react-router-dom

回答 1 投票 0

PrivateRoute 在刷新页面时总是重定向到登录页面；如何等待useEffect()和localStorage？

我正在我的应用程序中实现安全和用户管理，并遇到了反应路由器、上下文、本地存储的问题。使用路由器，我创建了一条私有路由，并检查用户 ID

reactjs typescript react-router-dom

回答 3 投票 0

React中的loader组件返回undefined

我尝试获取产品 api 并在控制台日志中的加载器内，我可以看到三个产品的数组，但是当我导出它们并在另一个组件中使用它时，它返回未定义和 b...

javascript reactjs react-router-dom

回答 1 投票 0

React-router 路由不是渲染组件

我遇到了加载问题，我的路线标记未渲染任何组件。我尝试过的步骤：从index.js中的“react-router-dom”导入{BrowserRouter} 创建了 Header.js 我...

reactjs routes react-router react-router-dom

回答 1 投票 0

使用 Tailwind css 设置 Navlink 样式

我正在尝试将 tailwind-css 添加到 Navlink(react-router-dom)。我想添加活跃的风格。要添加活动样式，我可以使用我正在尝试将 tailwind-css 添加到 Navlink(react-router-dom)。我想添加活跃的风格。要添加活动样式，我可以使用 <NavLink to="/faq" activeStyle={{fontWeight: "bold",color: "red"}}> FAQs </NavLink> 有没有办法用 tailwind-css 做到这一点，我不想使用 css，也许是这样的？ <NavLink to="/faq" className={`${active?'font-bold text-red':'text-gray-900'}...`}> FAQs </NavLink> React Router 的 V6 不再具有 activeClassName 属性。以下是如何使用新版本的 ReactRouter 和 Remix 来使用 Tailwind 设计 NavLink <NavLink to="tasks" className={({ isActive }) => isActive ? activeClassName : undefined } > Tasks </NavLink> 取自此处https://remix.run/docs/en/v1/api/remix#navlink NavLink 组件具有 activeClassName 属性。 https://reactrouter.com/web/api/NavLink 最近我一直在使用 NavLink 在当前页面时创建的 aria 属性： <NavLink className="text-white aria-[current=page]:text-blue-400" to="/" > Home </NavLink> 你可以使用使用：.active 当 .active 类与当前 URL 路径匹配时，将自动应用于 NavLink 组件。示例 .active { @apply text-red-600 .... }

react-router-dom tailwind-css

回答 4 投票 0

如何在React中处理浏览器的“后退”按钮？

我现在有“react-dom-router v6.3.0”（严格来说！），我不明白如何处理浏览器的“后退”按钮。例如，我需要捕获事件，这样我就可以打开警告......

reactjs typescript react-router react-router-dom

回答 3 投票 0

react-router不显示元素[关闭]

我开始为我的应用程序学习react-router。起步不顺利，但最终情况有所好转。但现在，我偶然发现了一些我无法解决的问题，react-router 元素无法渲染，所以

reactjs react-router react-router-dom

回答 1 投票 0

ReactJs，使用react-router-dom v6导航回来时如何防止页面重新渲染

所以我有 2 页 1. 客户列表，2. 客户详细信息。因此客户列表页面将是一个表格，其中包含没有详细信息的客户 ID 列表，但有一个按钮可以导航到