React嵌套路由使用, 一开始想在路由里面嵌套路由,如下:
<Route path="/page1">
<Route path="/sub1"></Route>
<Route>
一直失败,后面想了个折中的法子,所有路由都配置成同级解析,只是在导航的时候,区分父子节点。
路由配置代码:
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
export const MyRoutes: any[] = [
{
path: "/Page1", name: "Page1",
children: [
{ path: "/Page1-sub1", name: "Page1-sub1", to: Page1-sub1},
{ path: "/Page1-sub2", name: "Page1-sub2", to: Page1-sub2},],
},
]
const allPath = () => {
let paths = MyRoutes;
MyRoutes.forEach((item: any) => {
if (item.children !== undefined && item.children.length > 0) {
paths = [...paths, ...item.children]
}
})
return paths;
}
const RouterMap = () => (
<div>
<Switch>
{allPath().map(item => {
return <Route key={item.path} exact={true} path={item.path} component={item.to} />
})}
</Switch>
</div>
)
导航树级结构,根据MyRoutes来生成即可。