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

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Маршруты в React</title>
</head>
<body>
    <div id="app"></div>
         
    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/history@5/umd/history.production.min.js" crossorigin></script>
	<script src="https://unpkg.com/react-router@6.3.0/umd/react-router.production.min.js" crossorigin></script>
	<script src="https://unpkg.com/react-router-dom@6.3.0/umd/react-router-dom.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
         
    <script type="text/babel">
    const Router = ReactRouterDOM.BrowserRouter;
    const Route = ReactRouterDOM.Route;
	const Routes = ReactRouterDOM.Routes;
	const Link = ReactRouterDOM.Link;
    const Navigate = ReactRouterDOM.Navigate;
        
    function Home(){ return <h2>Главная</h2>;}
    function New(){ return <h2>New</h2>;}
    
    ReactDOM.createRoot(
        document.getElementById("app")
    )
    .render(
        <Router>
            <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>
        </Router>
    );
    </script>
</body>
</html>

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Маршруты в React</title>
</head>
<body>
    <div id="app"></div>
         
    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/history@5/umd/history.production.min.js" crossorigin></script>
	<script src="https://unpkg.com/react-router@6.3.0/umd/react-router.production.min.js" crossorigin></script>
	<script src="https://unpkg.com/react-router-dom@6.3.0/umd/react-router-dom.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
         
    <script type="text/babel">
    const Router = ReactRouterDOM.BrowserRouter;
    const Route = ReactRouterDOM.Route;
	const Routes = ReactRouterDOM.Routes;
	const Link = ReactRouterDOM.Link;
    const Navigate = ReactRouterDOM.Navigate;
	const useParams = ReactRouterDOM.useParams;
        
    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(
        <Router>
            <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>
        </Router>
    );
    </script>
</body>
</html>

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Маршруты в React</title>
</head>
<body>
    <div id="app"></div>
         
    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/history@5/umd/history.production.min.js" crossorigin></script>
	<script src="https://unpkg.com/react-router@6.3.0/umd/react-router.production.min.js" crossorigin></script>
	<script src="https://unpkg.com/react-router-dom@6.3.0/umd/react-router-dom.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
         
    <script type="text/babel">
    const Router = ReactRouterDOM.BrowserRouter;
    const Route = ReactRouterDOM.Route;
	const Routes = ReactRouterDOM.Routes;
	const Link = ReactRouterDOM.Link;
    const Navigate = ReactRouterDOM.Navigate;
	const useParams = ReactRouterDOM.useParams;
        
	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(
        <Router>
            <div>
                <nav>
                    <Link to="/">Home</Link> | 
                    <Link to="/login">Login</Link>
                </nav>
                <Routes>
                    <Route path="/" element={<Home />} />
                    <Route path="/login" element={<Login/>} />
                </Routes>
            </div>
        </Router>
    );
    </script>
</body>
</html>

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

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Маршруты в React</title>
</head>
<body>
    <div id="app"></div>
         
    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/history@5/umd/history.production.min.js" crossorigin></script>
	<script src="https://unpkg.com/react-router@6.3.0/umd/react-router.production.min.js" crossorigin></script>
	<script src="https://unpkg.com/react-router-dom@6.3.0/umd/react-router-dom.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
         
    <script type="text/babel">
    const Router = ReactRouterDOM.BrowserRouter;
    const Route = ReactRouterDOM.Route;
	const Routes = ReactRouterDOM.Routes;
	const Link = ReactRouterDOM.Link;
    const Navigate = ReactRouterDOM.Navigate;
	const useParams = ReactRouterDOM.useParams;
    const useNavigate = ReactRouterDOM.useNavigate;
		
    function Home(){ return <h2>Главная</h2>; }
    function New(){
		const params = useParams();
        return <h2>New {params.id}</h2>;
    }
    function Old(){
        const params = useParams();
		const id = params.id;
		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(
        <Router>
            <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>
        </Router>
    );
    </script>
</body>
</html>
Программная навигация в React и useNavigate

Для использования хука useNavigate() вначале его надо импортировать:

const useNavigate = ReactRouterDOM.useNavigate;

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

const navigate = useNavigate();

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

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

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

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850