时间戳

首页 > 解决方案 > React Router - 如果登录，如何重定向用户？

reactjs - React Router - 如果登录，如何重定向用户？

问题描述

我正在使用 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功能。

标签： reactjsreact-routerreact-router-dom

解决方案

处理此问题的更好方法是在您的 Navbar 组件本身中。

在您的导航栏组件中，设置componentDidMount()检查用户是否经过身份验证并重定向它们。

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

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

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

推荐阅读