reactrouter4路由钩子_react-router 4 路由的嵌套

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