react-router嵌套路由怎么写？

Question

如图所示，项目默认进入Main组件，Main有四个子组件，通过 footer 切换，默认显示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>
    );

Answer 1

已解决

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>
    )
  }
}