Для выполнения переадресации с одного маршрута на другой в модуле 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>
Для использования хука useNavigate() вначале его надо импортировать:
const useNavigate = ReactRouterDOM.useNavigate;
Допустим, мы хотим выполнять переадресацию с адресов "/old" по пути "/new" - с компонента Old на компонент New. И, допустим, при переадресации необходимо передавать параметр id. Для этого в компоненте Old получаем функцию useNavigate:
const navigate = useNavigate();
И затем по нажатию на кнопку вызываем эту функцию, передавая в нее путь перехода:
<button onClick={async event => { navigate(`/new/${id}`); }} >Navigate</button>