Reactjs 我应该刷新浏览器以使用Routes |和#xA0；反应

我有一些路线的菜单。我想在单击菜单时显示与其路线相对应的组件。问题是，单击会更改浏览器上的url，但显示的组件不会更改。我必须手动刷新页面以呈现良好的组件。但我的目标是在单击时显示好的组件，而不刷新页面

以下是我的Menu.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>

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

以下是我的渲染方法App.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>

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

render（）{
返回(
(  ) }
/>
(  ) }
/>
);
}

---

谢谢你的帮助

我解决了我的问题，我犯了一个很大的错误，我的错

我刚刚删除了将代码包装在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>

---

我认为

标签应该用

标签包装才能工作。因此，如果您有相同的问题，只需检查您是否通过

标记包装了

标记，并将其删除。

您使用的是内存路由器吗？我从未听说过这一点