React Router 6 — Руководство по обновлению

React Router версии 6 представляет несколько новых мощных функций, а также улучшенную совместимость с последними версиями React.

Примечание. React Router v6 активно использует хуки React, поэтому вам потребуется React 16.8 или более поздней версии. Он также представляет несколько критических изменений по сравнению с версией 5. Так что будьте внимательны перед обновлением.
ex-useNavigate вместо useHistory

Обновление с v5 до v6

Установить

**For web
npm install react-router-dom@next
**for a React Native app
npm install react-router-native@next

Критические изменения —

1. Изменить ‹Переключиться› на ‹Маршруты›

2. Измените
‹Точный путь=”/”›‹Дом /›‹/Маршрут›.

В
‹Route path=”/” element={‹Home /›} /›

Подробно. Теперь вы не можете использовать ‹Switch›, но должны использовать ‹Routes›.

и второе изменение

‹Точный путь=”/”›‹Дом /›‹/Маршрут› не будет работать.

Вы должны передать компонент с реквизитами элемента, например

‹Маршрутный путь=”/” element={‹Главная страница /›} /›

V5------------------------------------------
import {
  BrowserRouter,
  Switch,
  Route,
  Link,
  useRouteMatch
} from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/users">
          <Users />
        </Route>
      </Switch>
    </BrowserRouter>
  );
}
v6-------------------------------------------------
import {
  BrowserRouter,
  Routes,
  Route,
  Link
} from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="users/*" element={<Users />} />
      </Routes>
    </BrowserRouter>
  );
}

3. Значительное изменение во вложенной маршрутизации.
здесь, в примере, пользовательский компонент использовался как вложенный маршрутизируемый компонент.

V5------------------------------------------
// App component
function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/users">
          <Users />
        </Route>
      </Switch>
    </BrowserRouter>
  );
}

// user component 
function Users() {
  return (
    <div>
      user component
        <Route path={'users/:id'}>
          <UserProfile />
        </Route>
    </div>
  );
}

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

<Route path={'users/:id'}>
          <UserProfile />
        </Route>

но это не будет работать в версии 6, поэтому для версии 6 вы должны поместить это в ‹Маршруты›.

<Routes>
<Route path={':id'}>
          <UserProfile />
        </Route>
 </Routes>

имаршрутизация в приложении, которую вы должны поставить * после пути пользователя, например

<Routes>
        <Route path="users/*" element={<Users />} />
      </Routes>

4. Еще один способ реализации вложенных маршрутов в V6.

V6 также предоставляет другой способ реализации вложенных маршрутов, когда вы можете расположить все связанные маршруты в одном месте, а в родительском компоненте вы можете использовать компонент Outlet для отображения дочерних маршрутов.

здесь, в примере, дочерний профиль пользователя routeтакже помещается в тот же файл маршрутизации

import {
  BrowserRouter,
  Routes,
  Route,
  Link
} from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="users/*" element={<Users />}>
          <Route path={':id'}><UserProfile /></Route>
         </Route></Routes>
    </BrowserRouter>
  );
}

а в компоненте профиль пользователя мы будем использовать Outlet to render child route

import {
  Outlet
} from "react-router-dom";
// user component
function Users() {
  return (
    <div>
      user component
         <Outlet />
    </div>
  );
}

Примечание. Сейчас нам не нужно передавать точное свойство с маршрутом. это будет внутренне понято реактивным маршрутизатором. Порядок маршрутов теперь также не важен с v6.

v5-------------------------------------------------
<Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/users">
          <Users />
        </Route>
      </Switch>

v6-------------------------------------------------
<Routes>
        <Route path="/" element={<Home />} />
        <Route path="users/*" element={<Users />}>
          <Route path={':id'}><UserProfile /></Route>
         </Route></Routes>

useNavigate вместо useHistory

v5-------------------------------------------------
import { useHistory } from "react-router-dom";
const history = useHistory();
history.push("/home");
history.replace("/home");
for forward and backward navigation
const { go, goBack, goForward } = useHistory();
go(-2)
<button onClick={goBack}>Go back</button>
<button onClick={goForward}>Go forward</button>
v6-------------------------------------------------
import { useNavigate} from "react-router-dom";
 const navigate = useNavigate();
 navigate("/home");
  navigate("/home", { replace: true });
for forward and backward navigation
const navigate = useNavigate();
navigate(-2)
navigate(-)
  <button onClick={() => navigate(-1)}>Go back</button>
  <button onClick={() => navigate(1)}>Go forward</button>

реквизиты activeClassName и activeStyle удалены

свойства activeClassName и activeStyle были удалены из NavLinkProps. чтобы проверить активную ссылку, вы должны передать функцию и явно добавить класс. Это обеспечивает больший контроль.

<NavLink className={(navData)=> navData.isActive ?'active':''}  to="/">Link</NavLink>

‹Редирект› удален

Компонент ‹Redirect› был удален в v6.

Replace this 
<Redirect from="about" to="about-us" />
By this
import { Navigate } from "react-router-dom";
<Route path="/" element={<Navigate to="/home" replace />} />
or for posuhing in history
<Route path="/" element={<Navigate to="/home" />} />

‹Подсказка› была удалена

Компонент «Подсказка» также был удален без какого-либо другого компонента в качестве резервной копии или замены. Так что будьте внимательны при обновлении, если у вас есть огромные варианты использования этого компонента. потому что до тех пор, пока не будет предоставлена ​​какая-либо замена, вы должны записать свой собственный код.

Спасибо за обучение… 👏👏👏