Установить axios как дополнительную зависимость
npm install -save axios

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

1. Относительные маршруты + ссылки

Давайте теперь определим маршруты для нашего тестового приложения.

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

С новым тегом Routes у нас есть следующие преимущества:

  • Все ‹Маршруты› и ‹Ссылки внутри ‹Маршрутов› являются относительными.
  • Маршруты выбираются на основе наилучшего совпадения, а не проверяются в порядке появления. Вот поэтому и не надо!

Таким образом, мои маршруты первого уровня с использованием новых тегов можно определить следующим образом:

import React from 'react';
import './App.css';
function App() {
return (
‹BrowserRouter›
‹Routes›< br /> ‹Route path=”/” element={‹Home /›} /›
‹Route path=”users/*” element={‹Users /›} /›
‹/Routes ›
‹/BrowserRouter›
);
}
экспортировать приложение по умолчанию;

Вы могли заметить использование element вместо component в теге Route. Имея возможность предоставить элемент для маршрута, становится проще использовать элемент jsx и иметь возможность передавать реквизиты компоненту в том же операторе Route, как показано ниже, где пользователи отправляются в качестве реквизитов компоненту UserDetails:

‹Путь маршрута=”:id” element={UserDetails users={users}/} /›

Используя описанный выше подход, любые данные могут быть переданы как реквизиты элементу маршрута и доступны как обычные реквизиты.

Кроме того, параметры маршрута можно получить с помощью хука useParams, как показано ниже:

let params = useParams();
console.log(params.id);

Другой полезный хук, который можно использовать для перехода к другому пути в коде, — это useNavigate, который мы использовали для навигации, как показано ниже:

let navigation = useNavigate();
const selectUser = (id )=›{
navigation(‘/users/’+id);
};

2. Вложенные маршруты

Определение дочерних маршрутов или вложенных маршрутов в этой версии также намного проще.
В нашем примере теперь мы можем определять дочерние маршруты в компоненте Users, не беспокоясь об относительном пути, который делается в более старых версиях путем извлечения текущий путь и сопоставление с ним. Вместо этого он автоматически создаст и обнаружит родительский путь. Таким образом, мы можем просто определить путь для компонента дочернего уровня, как показано ниже:

import React from 'react';
import './Home.css';
const Users = (props) =› (
‹div›
‹nav›
‹Link to="new"›Добавить нового пользователя‹/Link›
‹/nav›
‹Маршруты›
‹Route path=":id" element={UserDetails users={ users}/} /›
‹Route path="new" element={‹AddNew /›} /›
‹/Routes›
‹/div›
);< br /> экспорт пользователей по умолчанию;

Другой подход к определению вышеуказанных дочерних маршрутов находится в одном месте на верхнем уровне App.js, как показано ниже:

function App() {
return (
‹BrowserRouter›
‹Routes›
‹Route path="/" element={‹Home /›} /›
‹Route path=”users” element={‹Users /›}›
‹Route path=”:id” element={UserDetails /} /›
‹Route path="new" element={ ‹AddNew /›} /›
‹/Route›
‹/Routes›
‹/BrowserRouter›
);
}
функция Users() {
return (
‹div›
‹nav›
‹Link to="me"›Мой профиль‹/Link›
‹/nav›
‹Выход /›
‹/div›
)
}

Этот подход может быть полезен для простых приложений, поскольку все маршруты определены в одном месте вместе с иерархией с использованием вложенных тегов маршрутов, как указано выше. Обратите внимание, что теперь у нас нет * для родительского маршрута, поскольку мы предоставляем возможные дочерние маршруты в том же месте. Вам понадобится *, если есть еще несколько дочерних маршрутов, не включенных в верхний список.

Также обратите внимание, что нам нужно будет включить Outlet в дочерний компонент, который будет отображать дочерние маршруты, как показано в компоненте Users выше.

3. Автоматическое ранжирование маршрутов

Синтаксис предоставления шаблонов для пути маршрута упрощен для облегчения автоматического ранжирования маршрута. Он поддерживает только 2 вида заполнителей: параметры в стиле dynamic:id и подстановочные знаки *, которые можно использовать только в конце пути. Он также игнорирует косую черту в конце URL-адреса.

Некоторые допустимые примеры путей включают
users
users/:id
users/*
users/new
users/:id/*
users/new/ *

Теперь вы не можете использовать RegExp или подстановочные знаки в середине пути. Это обеспечивает автоматическое ранжирование маршрутов и сопоставление с шаблонами, исключая необходимость в Switch, точном, строгом и т. д.

4. Готовая к приостановке навигация

React-router версии 6 поддерживает лениво загруженные пути, где лениво загруженные компоненты могут быть предоставлены свойству элемента напрямую. Маршруты можно определить как лениво загруженные, импортировав их с помощью React.lazy, как показано ниже:

let AddNew = React.lazy(() =› import(“./AddNew”));//lazy load path
let UserDetails = React.lazy(() =› import(“./UserDetails”)) ;//лениво загружаемый путь

Они будут обработаны приостановкой и переданы непосредственно как элемент, который будет загружен для пути, как показано ниже:

‹Резервный вариант =”‹div›Загрузка…‹/div›”›
‹Маршруты›
‹Путь маршрута=”:id” element={‹UserDetails users={users}/›} /›
‹Route path="new" element={‹AddNew /›} /›
‹/Routes›
‹/Suspense›

Это предотвратит загрузку этих маршрутов во время начальной загрузки, и они будут загружены только тогда, когда пользователь перейдет к ним. Это также решает старую проблему, когда компоненты с ленивой загрузкой не могли быть предоставлены в качестве значения для компонента в определении пути маршрута напрямую и требовали некоторого обходного пути с использованием render или propTypes.

5. Конфигурация маршрута на основе объектов с помощью useRoutes

Если вам нравится определять маршруты как объекты JavaScript вместо использования элементов React, как мы делали ранее, в версии 6 появился хук useRoutes.

Таким образом, вы также можете определить свои маршруты, как показано ниже, в форме конфигурации объекта:

function App() {
let element = useRoutes([
// Это то же самое, что реквизиты, которые вы предоставляете для ‹Route›
{ path: '/', element: ‹Home / › },
{ path: 'users', element: ‹Users /›,
// Вложенные маршруты используют дочернее свойство, которое также
// то же, что и ‹Route›< br /> дочерние элементы: [
{путь: ':id', элемент: ‹UserDetails /› },
{путь: 'новый', элемент: ‹AddNew /› }
]< br /> },
// Перенаправления используют свойство redirectTo на
{ path: 'home', redirectTo: '/' },
// Ненайденные маршруты работают так, как вы ожидаете
{ path: '*', element: ‹AddNew /› }
]);
// Возвращенный элемент будет отображать весь элемент
// иерархия со всеми соответствующими необходимый контекст
возвращаемый элемент;
}

Что нужно помнить при переходе на React-router версии 6:

Ниже приведен сводный список основных изменений в версии 6, о которых необходимо позаботиться при переходе с более старой версии:

  1. Замените теги Switch на Routes.
  2. Удалите использование точных, строгих путей.
  3. Обновите путь маршрута, чтобы следовать заданным шаблонам (: id и * в конце шаблона маршрута).
  4. Определите относительные и вложенные маршруты без использования текущего match.url.
  5. Замените react-router-config хуками useRoutes, чтобы определить конфигурации маршрута в формате объекта.
  6. Замените useHistory на useNavigate для выполнения навигации по логике кода.
  7. Замените свойство компонента/рендеринга элементом в определениях пути маршрута.
  8. Используйте Suspense и React.lazy для ленивой загрузки маршрутов, предоставив элемент свойства в качестве лениво загружаемого компонента.
  9. Используйте хук useParams, чтобы получить значения параметров из текущего маршрута.

Вы можете обратиться к официальной документации React в руководстве по миграции.

Вы также можете обратиться к примеру приложения, которое мы создали в этом блоге, используя React-router версии 6, код можно найти.

Вывод

React-router — одна из самых важных библиотек в экосистеме React. С новой предстоящей версией использовать этот пакет для маршрутизации в вашем приложении React станет еще проще, поскольку он устраняет некоторые ненужные сложности. Наверняка будут некоторые критические изменения, если вы уже используете более старую версию, но это может быть основной выпуск, на который стоит обновиться, как только он официально выйдет.

А пока подождем и будем готовы!

Первоначально опубликовано на https://walkingtree.tech 27 февраля 2020 г.