在子组件中实现路由嵌套时,控制台报错:<Routes> 您在 <Route path=“/”> 下呈现后代(或称为“useRoutes()”),但父路由路径没有尾随“*”。这意味着,如果导航得更深,父路将不再匹配,因此子路由将永远不会呈现。请将父<Route path=“/”>更改为<Route path=“*”>。
报错原因:在router v6中,所有路由路径始终是完全匹配,不需要像router v4/5一样匹配路径前缀
解决方法:
1、如果路由配置在主组件(一般是<App/>)中,则为父路径指定*通配符
2、如果路由配置在子组件(<App/>下渲染的组件)中,将有关父组件的路由配置删除,只留下需要渲染的子组件的路由配置
react实现子路由嵌套,并渲染页面的方法:
第一步:在<App/>组件中配置相关路由(<App/>为该react项目渲染的主组件)
<Route path="/user" element={<User />}>
<Route path="center" element={<Center />} />
<Route path="many" element={<Many />} />
</Route>
第二步:添加点击跳转事件,key对应子页面路径
const items1 = [
{
label: "用户管理",
key: "/user/center",
children: [
{ label: "用户管理", key: '/user/center' },
{ label: "新增用户", key: '/user/many' },
],
},
]
第三步:设置点击事件,使用useNavigate实现点击跳转
const navigate = useNavigate();
const handleMenuClick = (key) => {
navigate(key);
};
<Menu
items={items1}
onClick={({ key }) => handleMenuClick(key)}
/>
第四步:在<User/>组件下配置子路由(<User/>组件为<App/>下渲染的子组件)
<Routes>
<Route path="center" element={<Center />} />
<Route path="many" element={<Many />} />
</Routes>