react-router-dom嵌套路由

路由配置

 

import React from 'react';
import ReactDOM from 'react-dom';
// import App from './view/App';
import './utils/common.scss';
import { Link, Route, BrowserRouter } from 'react-router-dom'
import Home from './view/home/home'
import Detail from './view/detail/detail'
import Person from './view/person/person'
import DetailChild from './view/detail/detailChild/detailChild'
import DetailChildOne from './view/detail/detailChildOne/detailChildOne'
 
const App = (
    <BrowserRouter>
        <ul>
            <li><Link to="/home">首页</Link></li>
            <li><Link to="/detail">详情页</Link></li>
            <li><Link to="/person">个人中心</Link></li>
        </ul>
        <div>
            <Route exact path="/home" component={Home} />
            <Route path="/detail" render={() => 
                <Detail>
                    <Route exact path="/detail" component={DetailChild} />
                    <Route path="/detail/DetailChildOne" component={DetailChildOne} />
                </Detail>
            } />
            <Route exact path="/person" component={Person} />
        </div>
    </BrowserRouter>
)
 
ReactDOM.render(App, document.getElementById('root'));

 

　　在入口文件中进行路由的配置其中BrowserRouter是非hash路由的模式url后面不会带有#，Route是对应每个路由组件主要有exact、path、component、render这几个属性，其中嵌套路由主要用到的属性是render属性。将对应嵌套路由写到render属性中，最外边用父路由包裹住。
　　注意！！！render的箭头函数是没有{}的

嵌套路由的页面

 

import React, { Component } from 'react'
import './detail.scss'
import {withRouter,Link} from 'react-router-dom'
 
class Detail extends Component {
    render() {
        return (
            <div>
                Detail页面
                <Link to="/detail">嵌套路由1</Link>
                <Link to="/detail/DetailChildOne">嵌套路由2</Link>
                {this.props.children}
            </div>
        )
    }
}
export default withRouter(Detail)

 

　　在要进行嵌套路由的页面要在需要嵌套的地方加上{this.props.children}这样嵌套的路由就会在显示在这里了。
　　注意export default withRouter(Detail)一定要用withRouter绑定到组件上不然组件上是没有this.props.children.history这个方法的这样就不能通过js的方法this.props.children.history(pathname : '/detail')跳转

结果