How to write react-router nested route?

as shown in the figure, the project enters Main component by default. Main has four sub-components. Through footer switching, the default display is Msite component . The route of react is really difficult to understand, and there is a problem with how to write it

. 
// 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

React-router4 react.js
Mar.31,2021

resolved 

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

Previous: Use font-spider tarantula to compress the font to report an error < web font not found >

Next: After the for loop is used in Promise, the final result cannot be obtained. How to modify it if it is changed to promise.all?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu