问题描述: 在设置react路由时,有个非路由组件要和部分路由绑定显示,因此使用二级路由。但是v6版本Routers不支持嵌套非路由组件,因此报错!
代码:
const AppRouter = () => {
return (
<Router>
<Routes>
<Route path='/city' element={<City />}></Route>
<Layout path='/'>
<BottomNav></BottomNav>
<Routes>
<Route path='/' element={<Home />}></Route>
<Route path='/life' element={<LifeService />}></Route>
<Route path='/shop' element={<Shop />}></Route>
<Route path='/user' element={<User />}></Route>
</Routes>
</Layout>
{/* <Route path='/*' element={<Layout/>}></Route> */}
</Routes>
</Router>
)
}
解决方法: 将Layout封装成组件,通过来进行跳转,并配置path属性。
修改后代码:
const AppRouter = () => {
return (
<Router>
<Routes>
<Route path='/city' element={<City />}></Route>
<Route path='/*' element={<Layout/>}></Route>
</Routes>
</Router>
)
}
export default function Layout(props) {
console.log(props.children, '1');
return (
<div>
<BottomNav></BottomNav>
<Routes>
<Route path='/' element={<Home />}></Route>
<Route path='/life' element={<LifeService />}></Route>
<Route path='/shop' element={<Shop />}></Route>
<Route path='/user' element={<User />}></Route>
</Routes>
</div>
)
}
注意!!!: v6版本的path为严格匹配,因此如果path=‘/‘则无法访问内部的二级路由,应采用path=’/*’,*通配符进行路由设置。