Как создать частный/защищенный маршрут в React Router v4

В angular у нас есть authGuard, который проверяет, вошел ли пользователь в систему или нет. Если он не вошел в систему, ему не разрешено посещать этот URL. он перенаправляется на страницу входа или домашнюю страницу.

Если вы хотите сделать это в React, следуйте инструкциям.

Идея

Мы создаем компонент более высокого порядка, который внутренне использует маршрут и перенаправление на основе состояния входа в систему. это состояние можно передать через реквизит или проверить внутри самого компонента.

Для простоты мы передали его как реквизит.

Руководство

Для простоты мы передали его как реквизит.

Шаг 1: создайте новый компонент с именем PrivateRouter.js. здесь pathname — это URL-адрес, по которому пользователь будет перенаправлен, если он не вошел в систему.

Шаг 2: Используйте этот компонент в своем приложении.

let isLoggedIn = false;

<PrivateRoute
  isLoggedIn={isLoggedIn}
  path="/editList/:id"
  component={EditList}
/>;

Вы должны передать статус isLoggedIn в компонент или вы можете вызвать его изменение, чтобы получить статус в самом компоненте.

Заключение

И это все! Это сработало для вас? Пожалуйста, оставляйте любые вопросы и комментарии ниже!

Спасибо за чтение!

Если вы нашли эту статью полезной, хлопайте! 👏👏👏.