我不知道如何构造正确的问题标题,很抱歉,但是在下面这样的路由结构中,我希望admin
路径总是显示organisations
作为默认的/index,就像当你导航到/admin
时,它会自动导航到/admin/organisations
,但是例如在其他路径/admin/users
或/admin/organisations/create
中,相关的组件会呈现。
这样的要求是否适用于路由createBrowserRoute?
const routes = createBrowserRouter([
{
path: '/',
element: <AppShell />,
children: [
{
path: 'admin',
element: <AdminPanel />,
children: [
{ path: 'organisations', element: <Organisations /> },
{ path: 'users', element: <Users /> }
]
}
]
}
]);
目前,我在AdminPanel
组件中有一个useEffect
,如
React.useEffect(()=>{
if(window.location.pathName === "/admin" ) navigate("/admin/organisations")
},[])
但是,通过React路由器 prop 可以做到吗?
我之所以选择这种结构(children array),是因为所有的子管理路径都应该可以访问侧菜单,而且根据react-router官方教程,这是最好的方法
3条答案
按热度按时间flvlnr441#
你也可以使用这个:Link
iq0todco2#
您的AdminPanel可能如下所示:
oknwwptz3#
您可以创建一个捕获所有路由,并将其放在阵列的底部。
您有3个选项可能会对您有所帮助:
splats
(链路)、basename
(链路)和layout routes
(链路)。/admin
似乎是一种布局路线,它指定用户可能会看到某种只呈现其内容的 Jmeter 板(常见情况:显示仅对admins
可见的侧边栏)。此外,还可以使用
<Navigate>
(link)元素从一个组件移动到另一个组件: