如何在react-router-dom v6中为所有子路由使用一条路由
我有路线
<Routes>
<Route path="/main" element={<Main />}>
<Route path=":page" element={<><PostList /><Pagination /></>} />
<Route path="post/:id" element={<PostCurrent />} />
<Route path="login" element={<SignIn />} />
</Route>
<Route element={<ProtectedRoute />}>
<Route path="/dashboard" element={<Dashboard />}>
<Route path="post-form" element={<PostForm />} />
<Route path="post-list" element={<PostListDashBoard />} />
</Route>
</Route>
<Route path="*" element={<Navigate to="/main/0" replace />} />
</Routes>
共有1个答案
如果要在“/:p age”和“/post/：id”路由上同时呈现 SignIn 组件，请创建布局路由以呈现 SignIn 并为嵌套的 Route 组件呈现 Outlet。
示例:
import { Outlet } from 'react-router-dom';
const MainLayout = () => (
<>
<Outlet />
<SignIn />
</>
);
...
<Routes>
<Route path="/main" element={<Main />}>
// Layout route rendering Signin w/ nested routes
<Route element={<MainLayout />}>
<Route
path=":page"
element={<><PostList /><Pagination /></>}
/>
<Route path="post/:id" element={<PostCurrent />} />
</Route>
<Route path="login" element={<SignIn />} />
</Route>
<Route element={<ProtectedRoute />}>
<Route path="/dashboard" element={<Dashboard />}>
<Route path="post-form" element={<PostForm />} />
<Route path="post-list" element={<PostListDashBoard />} />
</Route>
</Route>
<Route path="*" element={<Navigate to="/main/0" replace />} />
</Routes>
-
问题内容： 是否有一个现有的库会将我的路由实例简化为路径数组？ 范例 ： 输出量 我可以编写一个减少代码的功能，用几行代码来解决这个问题，但是我想知道是否有一个现有的库可以帮我做到这一点，并照顾使用React Router表示路由的不同方式。 问题答案： 由于找不到任何东西，我最终为此创建了一个库… https://github.com/alansouzati/react-router-to- a
-
我卡住了。我不能在我的请求后重定向我的用户。 有我的请求（在组件中）： 有人有什么建议可以帮我找到解决办法吗？
-
问题内容： 有没有办法在React Router v4中嵌套路由？ 这有效： 这不是： 客户组成部分： 问题答案： 到目前为止，我发现的最佳模式。 我可以继续将其嵌套在组件中，并且一切都很好，包括hmr（如果使用webpack，请不要忘记设置为）
-
问题内容： 我有以下几点： 使用DefaultRoute时，由于任何* Dashboard需要在Dashboard中呈现，因此SearchDashboard呈现不正确。 我想在“应用”路由内将DefaultRoute指向路由“ searchDashboard”。这是我可以使用React Router进行的操作，还是应该为此使用常规Javascript（用于页面重定向）？ 基本上，如果用户转到主页，
-
我有以下几点： 使用DefaultRoute时，SearchDashboard渲染不正确，因为任何*仪表板都需要在仪表板中渲染。 我想为我的默认路线内的"应用程序"路由指向路由"搜索仪表板"。这是我可以用React路由器做的事情吗，或者我应该为此使用普通的Javascript（页面重定向）？ 基本上，如果用户转到主页，我希望将其发送到搜索仪表板。所以我想我正在寻找一个与
-
https://reacttraining.com/react-router/web/example/auth-workflow 我在react-router-dom文档中实现的Private路由 PrivateRoute是从Redux存储获取身份验证状态的已连接组件。 我正在尝试使用redux模拟存储和mount from Ezyme测试连接的组件。 即使状态中的身份验证为真，传递给私人路由的组