react-router-dom嵌套路由

最近终于闲下来有时间整博客了，因此急需个人react的学习进程。
因为之前不是专门做react的所以对于react-router的关注也比较少，react-router有多个版本还衍生除了react-router-dom这些新的第三方库（老子学不动了o(╥﹏╥)o）。就拿最近的3.0和4.0来说吧，嵌套路由的方式完全不一样，这里就拿我在学习的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')跳转

结果

在页面较为复杂的项目中嵌套路由是很有用的。加油！！！