鍍金池/ 問答/HTML5  HTML/ react-router嵌套路由怎么寫？

react-router嵌套路由怎么寫？

如圖所示，項目默認(rèn)進(jìn)入Main組件，Main有四個子組件，通過 footer 切換，默認(rèn)顯示Msite組件，react的路由真心看不懂，怎么寫都有問題

// Main組件
render(){
    return (
      <div>
        <div><Link to='/'>msite</Link></div>
        <div><Link to='/discover'>discover</Link></div>
        <div><Link to='/order'>order</Link></div>
        <div><Link to='/user'>user</Link></div>
        
        
        <Route path='' component={Msite}/>
        <Route path='/discover' component={Discover}/>
        <Route path='/order' component={Order}/>
        <Route path='/user' component={User}/>
      </div>
    )
  }
// App
    return (
      <Router history={history} >
        <div className='App'>
            <Switch>
              <Route  path='/' component={Main}/>
              <Route path='/search' component={Search} />
              <Route path='/address' component={Address} />
            </Switch>
        </div>
      </Router>
    );

clipboard.png

回答
編輯回答
九年囚

已解決

export default class MainPage extends React.Component {
  render(){
    return (
      <div>this is MainPage.jsx
        <div><Link to='/msite'>msite</Link></div>
        <div><Link to='/discover'>discover</Link></div>
        <div><Link to='/order'>order</Link></div>
        <div><Link to='/user'>user</Link></div>
        
        <Switch>
          <Route path='/discover' component={Discover}/>
          <Route path='/order' component={Order}/>
          <Route path='/user' component={User}/>
          <Route  component={Msite}/>
        </Switch>
      </div>
    )
  }
}
2017年3月24日 19:58