我应该刷新浏览器以使用 Routes | 渲染我的组件反应JS

Posted 2023-02-23

【中文标题】我应该刷新浏览器以使用 Routes | 渲染我的组件反应JS

【英文标题】：I should refresh browser to render my component using Routes | ReactJS

【发布时间】：2020-05-27 21:15:35

【问题描述】：

我有一个包含一些路线的菜单。我想在单击菜单时显示与他的路线相对应的组件。问题是，在点击时，它改变了我浏览器上的 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>
 );

感谢您的帮助！

【问题讨论】：

你在使用内存路由器吗？

我从来没有听说过这个

【参考方案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> 标签包裹才能工作。所以如果你有同样的问题，只要检查你是否用<Router>标签包裹了你的<Link>标签，然后删除它们。