React Router V6 Советы+Примеры

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

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

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

В HTML вы обычно создаете навигационную панель, которая содержит все ссылки на ваши различные страницы с помощью тега <a> со скриптами для каждой страницы. Это тоже здорово, но в React есть гораздо более простой способ организации маршрутов: использование React Router.

Установка

Сначала установите библиотеку React Router с помощью следующей команды.

npm install react-router-dom

Вы всегда можете подтвердить наличие зависимостей в вашем package.json.
Ваш package.json должен содержать react-router-dom в качестве такой зависимости.

"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.3.0",

Добавление маршрутов

Следующим шагом будет добавление маршрутов. Существует несколько способов структурирования маршрутов. Вы можете создать файл для всех маршрутов, но поскольку моему приложению не нужно много маршрутов, я решил добавить маршруты в App.js.

Импортируйте BrowerRouter следующим образом.

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'

Если вы непосредственно импортировали вышеуказанное в ваш App.js, как это сделал я, оберните ваше приложение в <Router>. Затем оберните все ваши Route в Routes. Я сделал это следующим образом.

function App() {
  return (
    <Router>
      <Routes>
        <Route exact path="/" element={<Home />} />
        <Route exact path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

Теперь у вас есть две страницы!

Реквизит exact в компоненте <Route /> служит для того, чтобы избежать путаницы для React Router. Что это значит?

Допустим, у вас есть два разных маршрута как таковых без exact ни в одном из маршрутов.

<Route path="/about/1" element={<AboutMe />} />
<Route path="/about/2" element={<AboutYou />} />

Это потенциально может вызвать проблемы с частичным соответствием. Например, URL /create/user/123 будет соответствовать маршрутам /create или /create/user/. Поэтому, чтобы избежать ошибок, я бы посоветовал вам включить exact в большинство ваших маршрутов.

Реквизит path определяет ваш маршрут. Например, / будет эквивалентен http://localhost:3000/, а /about будет эквивалентен http://localhost:3000/about.

Реквизит element определяет, что отображать. Например, в маршруте / я хотел отобразить компонент <Home />, а в маршруте /about — компонент <About />.

А как насчет вложенных маршрутов?
Мне нужно было иметь разные ссылки для моих постов, поэтому я решил, что структура /posts/idNumber подойдет для маршрутов моих постов.

<Route path="/posts" element={<Post />}>
  <Route path="/posts/:postId" element={<Post />} />
</Route>

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

Связывание

Итак, где же происходит собственно связывание?

1. Перейдите к файлу, в котором вы хотите создать ссылку.

2. Импортируйте Link.

3. Создайте ссылку!

import { Link } from 'react-router-dom'

....

<Link to={`/posts/${id}`}>See More</Link>

Реквизит to в данном случае является маршрутом. Он служит той же цели, что и ref из тега <a>.

Но что, если вы хотите передать ссылку информацию?

Просто создайте объект с информацией, которую вы хотите передать ссылке. Затем передайте объект через свойство state тега <Link />.
Для меня было необходимо передать реквизит, поэтому я сделал это следующим образом.

const restaurantData = {
        id: id,
        name: name,
        location: location,
        zipCode: zipCode,
        coordinates: coordinates,
        phone: phone,
        price: price,
        rating: rating
}

...

<Link to={`/posts/${id}`} state={restaurantData}>See More</Link>

Вот и все! Один совет, который я бы дал — планируйте свои маршруты перед тем, как реализовывать веб-приложение. Конечно, вы всегда столкнетесь с ситуациями, когда вам придется изменить свой первоначальный план, но наличие общей структуры вашего сайта и выстраивание маршрутов заранее всегда помогает.