React Router - 如果登录，如何重定向用户? [英] React Router - How to redirect user if logged in?

问题描述

我正在使用 react-router-dom 来管理我的路由:

const Routes = () =>{返回 (<浏览器路由器><div><Route path="/" component={Navbar}/><开关><路由精确路径="/" component={Main}/><Route path="/signin" component={SignIn}/><Route path="/signup" component={SignUp}/><PrivateRoute path="/dashboard" 组件={DashboardRoutes}/><Route path="*" component={() =><h1>找不到页面</h1>}/></开关>

<div><Route path="/" component={Footer}/>

</BrowserRouter>);};

如果用户未通过身份验证，我只想呈现 Navbar.如果用户通过身份验证，我不想呈现 Navbar 并且我想将他重定向到仪表板.

我尝试使用内联条件:

const Routes = () =>{返回 (<浏览器路由器><div>{!isAuthenticated() &&<Route path="/" component={Navbar}/>}<开关><路由精确路径="/" component={Main}/><Route path="/signin" component={SignIn}/><Route path="/signup" component={SignUp}/><PrivateRoute path="/dashboard" 组件={DashboardRoutes}/><Route path="*" component={() =><h1>找不到页面</h1>}/></开关>

<div><Route path="/" component={Footer}/>

</BrowserRouter>);};

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

我怎样才能做到这一点?

谢谢！

PS:我已经有一个 isAuthenticated 功能.

解决方案

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

在您的导航栏组件中，设置 componentDidMount() 以检查用户是否已通过身份验证并重定向他们.

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

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

render(){if(!isAuthenticated()){返回(...您的导航栏标记) 别的 {返回空值}}}

I'm using react-router-dom to manage my routes:

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>
  );
};

I want only to render the Navbar if the user is not authenticated. If the user is authenticated, I don't want to render the Navbar and I want to redirect him to dashboard.

I tried with inline conditioning:

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>
  );
};

However, when I'm not logged in, and then sign in, the Navbar persists, because it was rendered when isAuthenticated was false.

How can I achieve this?

Thanks!

PS: I already have a isAuthenticated function.

解决方案

A better way to handle this would be in your Navbar component itself.

In your Navbar component, setup componentDidMount() to check if the user isAuthenticated and just redirect them.

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

And in the render(), just use the isAuthenticated() method you set up to determine if you should return anything.

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

这篇关于React Router - 如果登录，如何重定向用户?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！