即使链接将“to”属性设置为正确的路线，但单击时也不会加载。 React-router 中的另一条路由被加载到它的位置。

这是代码：

App.js

  const [isLoggedIn, setIsLoggedIn] = React.useState(false);

  // useEffect to stop infinite looping problem with state
  React.useEffect(() => {
    const loggedInInfo = localStorage.getItem("isLoggedIn");

    if (loggedInInfo === "1") {
      setIsLoggedIn(true);
    }
  }, []);

内部返回（）

<Switch>
    <Route path="/" exact>
      <Redirect to="/login" />
    </Route>
    <Route path="/login">
      {!isLoggedIn && <Login onFormSubmit={handleFormSubmit} />}
    </Route>
    <Route path="/home-page">
      {isLoggedIn && <HomePage onLogout={handleLogout} />}
      {!isLoggedIn && <Redirect to="/login" />}
    </Route>
    <Route path="/approved-factory-assy-test">
      {isLoggedIn && <ApprovedFactoryAssyTest onLogout={handleLogout} />}
      {!isLoggedIn && <Redirect to="/login" />}
    </Route>
    <Route path="*">
      <h1>Page not found!</h1>
    </Route>
  </Switch>

导航栏.js

<div className="sub-menu">
                <ul>
                    <li><Link className="link" to='/approved-factory-assy-test' target="_blank" rel="noreferrer noopener">Approved Factory Assy Test</Link></li>

Issue

我怀疑当应用程序在新窗口和浏览器上下文中打开时，初始isLoggedIn初始渲染的状态为 false 会立即弹出用户off the "/approved-factory-assy-test"路线。问题在于初始状态与未经身份验证的状态相匹配，即false.

const [isLoggedIn, setIsLoggedIn] = React.useState(false); // <-- initially false

...

<Route path="/approved-factory-assy-test">
  {isLoggedIn && <ApprovedFactoryAssyTest onLogout={handleLogout} />}
  {!isLoggedIn && <Redirect to="/login" />} // <-- bounce user to login
</Route>

Solution

尝试使用更准确的初始状态。初始化isLoggedIn state fromlocalStorage，并使用useEffect挂钩以保存本地状态更改to本地存储。

Example:

const [isLoggedIn, setIsLoggedIn] = React.useState(() => {
  return JSON.parse(localStorage.getItem("isLoggedIn")) ?? false;
});

React.useEffect(() => {
  localStorage.setItem("isLoggedIn", JSON.stringify(isLoggedIn));
}, [isLoggedIn]);

现在根据初始渲染在初始渲染上渲染正确的组件isLoggedIn状态值。

<Route path="/approved-factory-assy-test">
  {isLoggedIn
    ? <ApprovedFactoryAssyTest onLogout={handleLogout} />
    : <Redirect to="/login" />
  }
</Route>