Как задать редирект в приложении?

Этот вопрос проверяет знание способов перенаправления (редиректа) в React Router

Короткий ответ

Редирект можно задать с помощью компонента <Navigate> для автоматического перенаправления или программно через хук useNavigate.

Длинный ответ

Редирект с использованием <Navigate>:

Используется для автоматического перенаправления, например, при условии проверки.

import { Navigate } from 'react-router-dom';

const ProtectedRoute = ({ isAuthenticated }) => {
  return isAuthenticated ? <Dashboard /> : <Navigate to="/login" />;
};

 

Программный редирект через useNavigate:

Позволяет перенаправлять пользователя по нажатию кнопки или в процессе выполнения логики.

import { useNavigate } from 'react-router-dom';

const Login = () => {
  const navigate = useNavigate();

  const handleLogin = () => {
    // Логика аутентификации
    navigate('/dashboard');
  };

  return <button onClick={handleLogin}>Login</button>;
};

Редиректы полезны для защиты маршрутов, перенаправления после действий или переноса пользователей с устаревших страниц.

Уровень

  • Рейтинг:

    2

  • Сложность:

    5

Навыки

  • React Router

    React Router

Ключевые слова

Подпишись на React Developer в телеграм