Перенаправление с помощью React Router v6

Проблема
Создание приложения, которое будет перенаправлять пользователя на страницу входа в систему, если он не прошел аутентификацию.

Решение
Мы можем использовать Navigate с react router 6 и некоторую простую условную логику для того, чтобы перенаправить пользователя обратно на страницу входа в систему, когда он пытается просмотреть страницу и не проходит аутентификацию.

Предположим, у нас есть бэкэнд, который принимает POST-запрос для аутентификации пользователя. Наш front-end настроен на отправку POST-запроса на выборку и, если пользователь аутентифицирован, сохраняет его в состоянии. Фронтальный запрос может выглядеть следующим образом.

const body = {
  username: username,
  password: password,
};

fetch("/login", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify(body),
}).then((r) => {
  if (r.ok) {
    r.json().then((user) => setCurrentUser(user));
    navigate("/home");
  } else {
    r.json().then((err) => setErrors(err.errors));
});

Вход в полноэкранный режим Выход из полноэкранного режима

Теперь мы можем использовать React Router v6 и Navigate для перенаправления пользователя в зависимости от того, есть ли у нас аутентифицированный пользователь, сохраненный в state (currentUser).

Убедитесь, что вы установили React Router v6, что можно сделать с помощью этой команды :npm install react-router-dom@6.

Далее убедитесь, что вы импортировали BrowserRouter, Navigate, Routes, Route из react-router-dom.

import { BrowserRouter, Navigate, Routes, Route } from "react-router-dom"

Войдите в полноэкранный режим Выйдите из полноэкранного режима

После того как вы настроили маршруты, мы можем добавить следующий фрагмент логики для проверки того, находится ли авторизованный пользователь в состоянии. Следующий код предполагает, что у меня есть страница, которая показывает собак.

<Route 
  path="/dogs"
  element={
    !currentUser ? <Navigate to="/login" /> : <DogsShow />
/>

Войти в полноэкранный режим Выйти из полноэкранного режима

В английском языке это означает, что если currentUser не является пользователем, то перейдите к /login, иначе отобразите DogsShow.

Вот и все — быстрый и простой способ добавить логику перенаправления в ваше приложение.

Перенаправление с помощью React Router v6

Рекомендуем почитать: