Переадресация

Последнее обновление: 21.03.2025

Для выполнения переадресации с одного маршрута на другой в модуле react-router-dom определен компонент Redirect. Например, пусть у нас раньше был путь "/old", и теперь с этого пути надо выполнять переадресацию по пути "/new":

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
    <style>
        a { margin: 5px;}
        .active{ background-color:#486ca3; color: #fff; padding:6px;}
    </style>
</head>
<body>
    <div id="app"></div>

    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <script type="text/babel" data-type="module">
        import React from "https://esm.sh/react@19?dev";
        import ReactDOM from "https://esm.sh/react-dom@19/client?dev";
        import { BrowserRouter, Routes, Route, Navigate, Link } from "https://esm.sh/react-router-dom@7?dev";
  
        function Home(){ return <h2>Главная</h2>;}
        function New(){ return <h2>New</h2>;}
        
        ReactDOM.createRoot(
            document.getElementById("app")
        )
        .render(
            <BrowserRouter>
                <div>
                    <nav>
                        <Link to="/">Home</Link> | 
                        <Link to="/old">Old</Link> |
                        <Link to="/new">New</Link>
                    </nav>
                    <Routes>
                        <Route path="/" element={<Home />} />
                        <Route path="/new" element={<New/>} />
                        <Route path="/old" element={<Navigate to="/new" />} />
                    </Routes>
                </div>
            </BrowserRouter>
        );
    </script>
</body>
</html>

Компонент Navigate определяет атрибут to - путь, на который выполняется переадресация.

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
    <style>
        a { margin: 5px;}
        .active{ background-color:#486ca3; color: #fff; padding:6px;}
    </style>
</head>
<body>
    <div id="app"></div>

    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <script type="text/babel" data-type="module">
        import React from "https://esm.sh/react@19?dev";
        import ReactDOM from "https://esm.sh/react-dom@19/client?dev";
        import { BrowserRouter, Routes, Route, Navigate, Link, useParams } from "https://esm.sh/react-router-dom@7?dev";
  
        function Home(){ return <h2>Главная</h2>;}
        function New(){
            const params = useParams();
            return <h2>New {params.id}</h2>;
        }
        function Old(){
            const params = useParams();
            return <Navigate to={`/new/${params.id}`} />;
        }
        
        ReactDOM.createRoot(
            document.getElementById("app")
        )
        .render(
            <BrowserRouter>
                <div>
                    <nav>
                        <Link to="/">Home</Link> | 
                        <Link to="/old/123">Old</Link> |
                        <Link to="/new/456">New</Link>
                    </nav>
                    <Routes>
                        <Route path="/" element={<Home />} />
                        <Route path="/new/:id" element={<New/>} />
                        <Route path="/old/:id" element={<Old />} />
                    </Routes>
                </div>
            </BrowserRouter>
        );
    </script>
</body>
</html>

Условная переадресация

Мы можем выполнять переадресацию в зависимости от некоторого условия. Например, пусть приложении есть два компонента Home и Login. И в зависимости от некоторого значения компонент Home может переадресовать запрос компоненту Login:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
    <style>
        a { margin: 5px;}
        .active{ background-color:#486ca3; color: #fff; padding:6px;}
    </style>
</head>
<body>
    <div id="app"></div>

    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <script type="text/babel" data-type="module">
        import React from "https://esm.sh/react@19?dev";
        import ReactDOM from "https://esm.sh/react-dom@19/client?dev";
        import { BrowserRouter, Routes, Route, Navigate, Link, useParams } from "https://esm.sh/react-router-dom@7?dev";
  
        let logged = false;
     
        function Home(){
            if(logged) return <h2>Welcome</h2>;
            return <Navigate to="/login" />;
        }
        function Login(){
            logged = true;
            return <h2>Login</h2>;
        }
        ReactDOM.createRoot(
            document.getElementById("app")
        )
        .render(
            <BrowserRouter>
                <div>
                    <nav>
                        <Link to="/">Home</Link> | 
                        <Link to="/login">Login</Link>
                    </nav>
                    <Routes>
                        <Route path="/" element={<Home />} />
                        <Route path="/login" element={<Login/>} />
                    </Routes>
                </div>
            </BrowserRouter>
        );
    </script>
</body>
</html>

Здесь в зависимости от значения переменной logged компонент Home либо может сам обработать запрос, либо может переадресовать его компоненту Login. Если logged равна false, то срабатывает редирект на компонент Login, который изменяет ее значение на true.

Программная навигация

Кроме использования компонента Navigate React позволяет выполнить переадресацию по определенному пути программно. Для этого применяется встроенная функция-хук useNavigate:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
    <style>
        a { margin: 5px;}
        .active{ background-color:#486ca3; color: #fff; padding:6px;}
    </style>
</head>
<body>
    <div id="app"></div>

    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <script type="text/babel" data-type="module">
        import React from "https://esm.sh/react@19?dev";
        import ReactDOM from "https://esm.sh/react-dom@19/client?dev";
        import { BrowserRouter, Routes, Route, Navigate, Link, useParams, useNavigate } from "https://esm.sh/react-router-dom@7?dev";
  
        function Home(){ return <h2>Главная</h2>; }
        function New(){
            const params = useParams();
            return <h2>New {params.id}</h2>;
        }
        function Old(){
            const {id} = useParams();
            const navigate = useNavigate();
            return <div>
                <h2>Old {id}</h2>
                <button
                onClick={async event => {
                    navigate(`/new/${id}`);
                }}
                >Navigate</button>
            </div>;
        }
        
        ReactDOM.createRoot(
            document.getElementById("app")
        )
        .render(
            <BrowserRouter>
                <div>
                    <nav>
                        <Link to="/">Home</Link> | 
                        <Link to="/old/123">Old</Link> |
                        <Link to="/new/456">New</Link>
                    </nav>
                    <Routes>
                        <Route path="/" element={<Home />} />
                        <Route path="/new/:id" element={<New/>} />
                        <Route path="/old/:id" element={<Old />} />
                    </Routes>
                </div>
            </BrowserRouter>
        );
    </script>
</body>
</html>

Программная навигация в React и useNavigate

Допустим, мы хотим выполнять переадресацию с адресов "/old" по пути "/new" - с компонента Old на компонент New. И, допустим, при переадресации необходимо передавать параметр id. Для этого в компоненте Old получаем функцию useNavigate:

const navigate = useNavigate();

И затем по нажатию на кнопку вызываем эту функцию, передавая в нее путь перехода:

<button 
	onClick={async event => { navigate(`/new/${id}`); }}
	>Navigate</button>

Назад Содержание Вперед

Глава 1. Введение в React
Глава 2. Основы React
Глава 3. Состояние компонентов
Глава 4. Работа с формами
Глава 5. Маршрутизация
Глава 6. Дополнительные статьи
- Сетевые запросы с Fetch API
- Lazy Loading и Suspense API

Помощь сайту

Юмани:

410011174743222

Номер карты:

4048415020898850

Телеграмм