react-router-dom nested route

Routing Configuration

 

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'));

 

　　Routing configuration file, wherein the inlet non BrowserRouter hash route mode not later url with #, Route corresponding to each route is the main component exact, path, component, render these properties, the route is mainly used to nest the property is to render property. Nested route corresponding written render attributes, outermost wrap with the parent routing.
　　note! ! ! render arrows in {} function is not

Nested routing of page

 

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)

 

　　In the page to be routed to the need to nest nested together {this.props.children} where such nested route will be displayed here.
　　Note export default withRouter (Detail) withRouter must use such a method can not be bound to the component by js Otherwise the component is not this.props.children.history this method this.props.children.history (pathname: '/ detail ') Jump

result