Как сделать что-то вроде роутера-розетки углового в Reactjs?

Question

У меня есть sideBarMenuComponent , который содержит следующий код в render ()

     <ul>
        <li><Link to='/home'>Home</Link></li>
        <li><Link to='/settings'>Settings</Link></li>
      </ul>

и другой MasterLayoutComponent , которые отображают HomeComponent и Настройки компонента в основном контенте в render ()

       <div className="MasterLayoutComponent">
          <Header />
            <div className="main-content">
               <Route exact path='/home' component={HomeComponent} />
               <Route exact path='/settings' component={SettingsComponet} />
            </div>
          <Footer />
        </div>

Но когда я нажимаю на ссылку sideBarMenuComponent, HomeComponent и SettingsComponet не отображаются, что не так?

Answer 1

Вы должны обернуть Router вокруг Route компонента.

import { BrowserRouter as Router, Route } from 'react-router-dom'

<Router>
  <div>
    <Route exact path='/home' component={HomeComponent} />
    <Route exact path='/settings' component={SettingsComponet} />
  </div>
</Router>

react-router-dom Источник и обучение: https://reacttraining.com/react-router/web/example/basic