Question

我正在使用react-router-dom来管理我的路线：

const Routes = () => {
  return (
    <BrowserRouter>
      <div>
        <Route path="/" component={Navbar} />
        <Switch>
          <Route exact path="/" component={Main} />
          <Route path="/signin" component={SignIn} />
          <Route path="/signup" component={SignUp} />
          <PrivateRoute path="/dashboard" component={DashboardRoutes} />
          <Route path="*" component={() => <h1>Page not found</h1>} />
        </Switch>
      </div>
      <div>
        <Route path="/" component={Footer} />
      </div>
    </BrowserRouter>
  );
};

如果用户未通过身份验证，我只希望呈现Navbar。如果用户已通过身份验证，则我不想呈现Navbar，而是要将其重定向到仪表板。

我尝试了内联条件：

const Routes = () => {
  return (
    <BrowserRouter>
      <div>
        {!isAuthenticated() && <Route path="/" component={Navbar} />}
        <Switch>
          <Route exact path="/" component={Main} />
          <Route path="/signin" component={SignIn} />
          <Route path="/signup" component={SignUp} />
          <PrivateRoute path="/dashboard" component={DashboardRoutes} />
          <Route path="*" component={() => <h1>Page not found</h1>} />
        </Switch>
      </div>
      <div>
        <Route path="/" component={Footer} />
      </div>
    </BrowserRouter>
  );
};

但是，当我没有登录然后登录时，Navbar仍然存在，因为它是在isAuthenticated为假时呈现的。

我该如何实现？

谢谢！

PS：我已经有一个isAuthenticated函数。

Answer 1

一种更好的处理方法是在Navbar组件本身中。

在您的Navbar组件中，设置componentDidMount()来检查用户是否已通过身份验证，然后直接重定向他们。

componentDidMount(){
    if(isAuthenticated()){
        this.props.history.push("/dashboard")
    }
}

在render（）中，只需使用您设置的isAuthenticated（）方法来确定是否应返回任何内容。

render(){
   if(!isAuthenticated()){
     return(
        ...your navbar markup
     ) else {
        return null
     }
   }
}

React Router-登录后如何重定向用户？

1 个答案: