1.在component组件内部需要嵌套的位置直接嵌套Route标签
这个方法会使得路由标签比较分散,子组件我们必须直接将Route标签写入到父组件之中,而且路由必须包含根路径.
// Dashboard.jsx
import Menu from '~/components/Menu/Menu';
import React from 'react';
import {Route,Switch} from "react-router-dom";
import Index from '~/container/Index/Index';
import TaskList from '~/container/TaskManage/TaskList/TaskList'
const routes = [
{
path: "/Dashboard/Index",
component: Index
},
{
path: "/Dashboard/TaskManage/TaskList",
component: TaskList
}
];
class Dashboard extends React.Component{
constructor(props, context ) {
super(props, context );
}
render(){
return(
{routes.map((route, index) => (
exact
key={index}
path={route.path}
component={route.component}
/>
))}
)
}
}
export default Dashboard
2.使用Route render渲染作内联嵌套
component使用this.props.children进行嵌套渲染,Dashboard为父组件,Index和TaskList为子组件
// router.js
(
)} />
// Dashboard.jsx
import Menu from '~/components/Menu/Menu';
import React from 'react';
class Dashboard extends React.Component{
constructor(props, context ) {
super(props, context );
}
render(){
return(
{this.props.children}
)
}
}
export default Dashboard