I should refresh browser to render my component using Routes | ReactJS

Question

I have a menu with some routes. I want to show the component that correspond to his route while clicking on the menu. The issue is that, on the click, it changes me the url on my browser but the component displayed doesn't change. I have to refresh manually the page to render the good component. But my aim is to display the good component on the click without refreshing the page.

Here is my Menu.js code :

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

Here is my render method App.js code :

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

Thanks for your help !

Answer 1

I resolved my issue, I just made a big mistake, my bad.

I just deleted <Router> tags that wrapped my code in Menu.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>

I believed that <Link> tags should be wrapped by <Router> tags to work. So if you have the same issue, just check if you wrapped your <Link> tags by <Router> tags, and delete them.