Redirect в react-router-dom v6

22 июля 2023 г.

Redirect с одного path на другой в <Router>

Можно использовать, например, в случае, когда нужно чтобы начальная страница после авторизации имела url отличный от “/”.

Для этого используем Navigate из React-Router-Dom

Документация: https://reactrouter.com/en/main/components/navigate

JavaScript

1import { BrowserRouter as Router, Route, Routes, Navigate } from "react-router-dom";
2
3// <...>
4  <Routes>
5    <Route
6      exact
7      path="/"
8      element={
9        <Navigate to="/home" />
10      }
11    >
12    <Route
13      exact
14      path="home"
15      element={
16        <Home />
17      }
18     />
19  </Routes>
20// <...>
21

Redirect в компоненте

Для редиректа в компоненте можно использовать useNavigate.

Например, если вам надо сделать редирект со страницы элемента к списку элементов, после его удаления.

JavaScript

1import { useNavigate } from 'react-router-dom';
2
3const SomeElement = () => {
4  //<..>
5  const navigate = useNavigate();
6
7  const onDelete = () => {
8    if(isDeleteSuccess){
9      navigate(“/list”)
10    }
11  }
12  
13  //<..>
14  
15  return (
16  	//some JSX
17  )
18}
19
20export default SomeElement;

Redirect в react-router-dom v6

Redirect с одного path на другой в <Router>

Redirect в компоненте

Другие посты