Я должен обновить браузер sh для рендеринга моего компонента с использованием Routes | ReactJS

Question

У меня есть меню с некоторыми маршрутами. Я хочу показать компонент, который соответствует его маршруту при нажатии на меню. Проблема в том, что при щелчке это меняет URL в моем браузере, но отображаемый компонент не меняется. Я должен вручную обновить страницу sh, чтобы отобразить хороший компонент. Но моя цель состоит в том, чтобы отобразить хороший компонент при нажатии без обновления страницы.

Вот мое меню. js код:

<Router>
   <Link to={'/'} className="nav-link" id="homeLink">
      <div className="tableElement active" id="home">
        <FontAwesomeIcon icon={ faHome } className="icon"/>
      </div>
   </Link>

   <Link to={'/org'} className="nav-link" id="orgLink">
      <div className="tableElement" id="organisation">
        <FontAwesomeIcon icon={ faTasks } className="icon"/>
      </div>
   </Link>

   <Link to={'/users'} className="nav-link" id="usersLink">
      <div className="tableElement" id="user">
        <FontAwesomeIcon icon={ faUsers }  className="icon"/>
      </div>
   </Link>
</Router>

Вот мой метод рендеринга App. js код:

render() {
 return (

   <Router>

    <div className="App">

      <LeftMenu/>

      <Switch>

         <Route exact path='/' component={Home}/>

         <Route path='/org'
                render={ (routeProps) => ( <Organisations {...routeProps} /> ) }
         />

         <Route path='/users'
                render={ (routeProps) => ( <UserTable {...routeProps} /> ) }
         />

      </Switch>

   </Router>
 );
}

Спасибо за помощь!

Answer 1

Я решил свою проблему, я только что сделал большую ошибку, моя ошибка.

Я только что удалил <Router> теги, которые обернули мой код в Меню. js.

<Link to={'/'} className="nav-link" id="homeLink">
  <div className="tableElement active" id="home">
    <FontAwesomeIcon icon={ faHome } className="icon"/>
  </div>
</Link>

<Link to={'/org'} className="nav-link" id="orgLink">
  <div className="tableElement" id="organisation">
    <FontAwesomeIcon icon={ faTasks } className="icon"/>
  </div>
</Link>

<Link to={'/users'} className="nav-link" id="usersLink">
  <div className="tableElement" id="user">
    <FontAwesomeIcon icon={ faUsers }  className="icon"/>
  </div>
</Link>

Я считал, что теги <Link> должны быть обернуты тегами <Router> для работы. Поэтому, если у вас возникла та же проблема, просто проверьте, обернули ли вы теги <Link> тегами <Router>, и удалите их.