Маршрутизатор React не перенаправляет по условию

Question

Я создаю систему управления школой, используя ReactJS. В этом я хочу перенаправить страницу входа в систему, когда isLoggedIn props изменяется с false на true. С консоли я проверяю, что он меняется, но я не могу выполнить условную маршрутизацию на основе этого реквизита. Реквизит меняется, но не перенаправляет.

import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom'
...

class App extends Component {
  renderRoutes = () => {
    const { isLoggedIn } = this.props.auth
    return isLoggedIn ?
      <Redirect to='dashboard' /> :
      <Redirect to='/' />
  }

  render() {
    return (
      <BrowserRouter>
        <Navbar />
        <Switch>
          <Route exact path="/" component={Authenticate} />
          <Route path="/dashboard" component={DashboardTeachers} />
          {this.renderRoutes()}
        </Switch>
      </BrowserRouter>
    )
  }
}

Я хочу перенаправить на «/ dashboard» после успешного входа в систему и перенаправить на «/» после успешного выхода из системы

Answer 1

Вы можете заключить частные маршруты в отдельный компонент и перенаправить оттуда.

Сначала создайте компонент PrivateRoute:

function PrivateRoute({ auth, children, ...rest }) {
  const { isLoggedIn } = auth;

  return (
    <Route
      {...rest}
      render={({ location }) =>
        isLoggedIn ? (
          children
        ) : (
          <Redirect
            to="/login"
          />
        )
      }
    />
  );
}

Замените код

<Route path="/dashboard" component={DashboardTeachers} />
{this.renderRoutes()}

на this

<PrivateRoute auth={auth}>
    <Route path="/dashboard" component={DashboardTeachers} />
</PrivateRoute>

И в вашем компоненте входа, перенаправить после успешной аутентификации

if (!isLoggedIn) {
      return (
        // your login ui
      );
    }

// redirect to dashboard if login is false
return <Redirect to="/dashboard" />;