React Router - Как перенаправить пользователя, если залогинен? - PullRequest
Новая
       19

React Router - Как перенаправить пользователя, если залогинен?

1 голос
/ 29 мая 2019

Я использую реагирующий маршрутизатор-дом для управления своими маршрутами: 

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.

1 Ответ

2 голосов
/ 29 мая 2019

Лучший способ справиться с этим - использовать сам компонент Navbar.

В компоненте Navbar установите componentDidMount(), чтобы проверить, является ли пользователь аутентифицированным, и просто перенаправьте его. 

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

А в render () просто используйте метод isAuthenticated (), который вы настроили, чтобы определить, должны ли вы возвращать что-либо. 

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