react-router4 嵌套路由

先直接贴代码

import React from 'react' ;
import ReactDOM from  'react-dom' ;
import { HashRouter as Router, Route, Switch} from  'react-router-dom' ;
import createBrowserHistory from  'history/createBrowserHistory' ;
import UserAddPage from  './pages/UserAdd/index' ;
import HomePage from  './pages/Home/index' ;
import HomeLayout from  './components/HomeLayout/index' ;

const hashHistory  =  createBrowserHistory();
const NoMatch  = ({ location }) =>  (
   <div>
    <h3>无法匹配 <code>{location.pathname}</code></h3>
  </div>
 )
ReactDOM.render((
   <Router history={hashHistory}>
    <div>
      <HomeLayout>//总会加载这个组件，并且下面 swicth 里面的组件会在它里面 render 
        <Switch>
          <Route path="/" exact component={HomePage}/>
          <Route path="/user/add" component={UserAddPage}/>
          <Route component={NoMatch}/>
        </Switch>
      </HomeLayout>
    </div>
  </Router>
), document.getElementById('root'));

 

https://stackoverflow.com/questions/42095600/nested-routes-in-v4

 

查看更多关于react-router4 嵌套路由的详细内容...