Question

因此，有4个组件。导航栏应始终可见，身份验证应位于path =“ /”上，而其他两个应在身份验证之后可见。身份验证组件完成身份验证后，会将用户令牌存储在localStorage中。完成身份验证后，在导航栏中，有一个signOut按钮，用于从localStorage中删除令牌。

当令牌存储在LS中时，如何使它进入'/ devices'并且用户保持登录状态，但是当令牌被删除时，如何使其回到'/'？当然，导航栏应始终可见。

使用这种方法登录后，在“ / devices”上显示黑屏。我在return中尝试过类似的方法：

         {localStorage.getItem("token") !== null ? (
            <Redirect to="/devices" />
          ) : (
            <Redirect to="/" from="/devices" />
          )}

但是我不断收到警告，我试图从已经存在的路径重定向。我几乎按应有的方式工作，登录后显示的是设备，当我注销后，它返回到身份验证页面，但随后它将不接受正确的用户凭据，并且出现http错误。刷新页面后，效果很好。

我是路由新手，很难解决。

谢谢。

  ReactDOM.render(
      <Provider store={store}>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </Provider>,
      document.getElementById("root")
    );

class App extends Component {
  render() {
    if (localStorage.getItem("token") !== null) {
      return <Redirect to="/devices" />;
    }
    return (
      <div>
        <Route path="/" component={Navbar} />
        <div>
          <Route path="/" exact component={Auth} />
          <Route path="/devices" exact component={Device1} />
          <Route path="/devices" exact component={Device2 } /> 
        </div>
      </div>
    );
  }
}

如何使用React Router v4在有条件的React中设置路由？

0 个答案: