时间戳

首页 > 解决方案 > React Navlink 更改 url 但不更改页面

reactjs - React Navlink 更改 url 但不更改页面

问题描述

我有反应应用程序，它也从 URL 获取参数并使用它从 Mongoose 获取数据，当有 navlink 更改用户的 ID 时，单击 URL 更改时，但页面不会刷新或更改。

App.js 看起来像这样：

return (
    <div className="App">
      <BrowserRouter> {
        isAuth()
      }
        <div>
          <div className="content">
            <Switch>
              <PublicRoute path="/login" component={Login} isAuthenticated={isAuthenticated} />
              <PrivateRoute path="/:id/whatsapper" component={Whatsapper} isAuthenticated={isAuthenticated} />
              <PrivateRoute path="/profile" component={ProfilePage} isAuthenticated={isAuthenticated} />
              <PrivateRoute path="/:id/canned-replies-settings" component={CannedRepliesPage} isAuthenticated={isAuthenticated} />
              <PublicRoute path="/reset-password" component={ForgotPasswordPage} isAuthenticated={isAuthenticated} />
              <Redirect to={isAuthenticated ? '/Whatsapper' : '/login'} />
            </Switch>
          </div>
        </div>
      </BrowserRouter> 
    </div>
); 
}

导航链接如下所示：

<ul>
    {
        departments.length > 0 ? departments.map((el, i) => (
          <div className="departmentItem" key={i}>
              <li className="departmentListItems"
                  >
                    <WorkIcon className="suiteCaseIcon"/>
                    <NavLink className="departmentListItemsLink" to={"/"+el._id+"/whatsapper"} >{el.departmentName || ''}</NavLink>
                    </li>
              {/* <hr className="profilePageSentenceListHr" /> */}
          </div>
       )) : <p>not found</p>
     }
</ul>

标签： reactjsreact-reduxreact-routerreact-hooks

解决方案

react 中的这个问题通常发生在路径与组件没有关联（通常是拼写错误）时，因为路径由浏览器更改，组件由 react 更改。在这种情况下，这是罪魁祸首/Whatsapper

      <Redirect to={isAuthenticated ? '/Whatsapper' : '/login'} />

PS：请为路径创建一个组件或使用关联的 id/Whatsapper重定向到或完全删除。/:id/whatsapperRedirect

推荐阅读