我应该刷新浏览器以使用Routes呈现我的组件| ReactJS

Question

我有一些路线的菜单。我想在单击菜单时显示与他的路线相对应的组件。问题是，单击后它会更改我浏览器中的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>

这是我的渲染方法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

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

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

我相信<Link>标签应由<Router>标签包装才能起作用。因此，如果您遇到相同的问题，只需检查是否用<Link>标签包裹了<Router>标签，然后将其删除。