Руководство пользователя React Router v6

Источник: Официальный аккаунт «Full Stack Developer»

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

Если у вас есть опыт маршрутизации в приложениях React, вы, вероятно, уже знаете, что за последние несколько летReach RouterОднако, начиная с версии 6, ему было уделено некоторое внимание, поскольку он был снова объединен с библиотекой React Router. Это означает, что версия v6 имеет меньший размер пакета, чем предыдущая версия, что является одной из основных причин существования Reach Router.

предпосылки

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

• Версия Node.js >= 12.x.x
• Менеджер пакетов, такой как npm, yarn или npx.
• Основы JavaScript, React.js и React Hooks

начиная

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

npx create-react-app react-router-v6-example
cd react-router-v6-example
yarn add history react-router-dom@next

Для удобства я использую codeandbox.io в качестве демонстрации.Для демонстрационного кода, подобного этому, рекомендуется использовать онлайн-инструмент IDE, такой как codeandbox.io

После установки зависимостей откройте в своем любимом редакторе кода.package.jsonфайл, вы увидитеreact-router-domВерсия зависимости библиотеки.

“dependencies": {
  // 安装的其余依赖项
  "react-router-dom": "6.0.0-beta.0",
},

Библиотека React Router различных программных пакетов

Библиотека React Router состоит из трех разных пакетов npm, каждый из которых служит своей цели.

• react-router
• react-router-dom
• react-router-native

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

Теперь, когда у нас это есть, давайте построим наш первый маршрут.

Создайте свой первый маршрут с помощью React Router v6

Чтобы создать свой первый маршрут с помощью библиотеки React Router, откройтеsrc/App.jsфайл, добавьте следующий оператор импорта.

import { BrowserRouter as Router } from 'react-router-dom';

Это изreact-router-domПервый компонент, импортированный библиотекой. Он используется для переноса различных маршрутов и использует API истории HTML5 для отслеживания истории маршрутов в приложениях React.

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

function App() {
  return <Router>{/* 所有路由都嵌套在其中 */}</Router>;
}

отreact-router-domСледующий импортируемый компонент является новымRoutes:

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

Этот новый элемент является предыдущимSwitchОбновленная версия компонента, включающая такие функции, как относительная маршрутизация и связывание, автоматическое ранжирование маршрутов, вложенная маршрутизация и компоновка.

нужныйreact-router-domПоследний компонент в называетсяRoute, который отвечает за отрисовку пользовательского интерфейса компонента React. оно имеетpathсвойство, которое всегда соответствует текущему URL-адресу приложения. Второй обязательный атрибут называетсяelement, когда текущий URL-адрес будет обнаружен, он сообщитRouteКакой компонент React отображать для компонента. здесьelementКлючевое слово также является новым.Ранее в React Router v5 вы использовали имяcomponentхарактеристики.

Чтобы создать первый маршрут в демонстрации ниже, давайте создадим маршрут с именемHomeБазовый функциональный компонент, который возвращает некоторый JSX.

function Home() {
  return (
    <div style={{ padding: 20 }}>
      <h2>Home View</h2>
      <p>在React中使用React Router v6 的指南</p>
    </div>
  );
}

Используйте следующие обновления маршрутизацииAppфункциональные компоненты. Еще одна особенность библиотеки v6, на которую следует обратить внимание, заключается в том, чтоRouteкомпонентelementТеперь свойства позволяют передавать компонент React, а не просто имя этого компонента React. Это упрощает передачу атрибутов маршрутам:

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

Чтобы убедиться, что он работает, вернитесь в окно терминала и используйте командуyarn startЗапустите сервер разработки. Затем перейдите по URL-адресу в окне браузера.http://локальный:3000.

Вот результат после этого шага:

Давайте быстро создадим еще один с именемAboutФункциональный компонент работает только тогда, когда URL-адрес в окне браузераhttp://localhost:3000/about будет отображаться только.

function About() {
  return (
    <div style={{ padding: 20 }}>
      <h2>About View</h2>
      <p>在React中使用React Router v6 的指南</p>
    </div>
  );
}

Тогда дляAboutДобавление компонентаRoute:

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
</Routes>

Теперь вернитесь в окно браузера и перейдите по URL-адресу.http://локальный: 3000/о:

Добавить меню навигации

Чтобы перемещаться по определенному маршруту в приложении React или по двум существующим маршрутам в демонстрационном приложении, давайте начнем сreact-router-domизLinkДобавьте минимальную панель навигации с помощью компонентов.

Сначала импортируйте его из библиотеки:

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

Концепция навигации между различными веб-страницами в HTML основана на использовании тегов привязки:

<a href="">Some Link Name</a>

Использование этого метода в приложении React вызовет веб-страницу при отображении нового представления или самой страницы. Чтобы не обновлять веб-страницу,react-router-domбиблиотека предоставляетLinkкомпоненты.

Далее, вAppВнутри функционального компонента создайте панель навигации, как показано во фрагменте кода:

<Router>
  <nav style={{ margin: 10 }}>
    <Link to="/" style={{ padding: 5 }}>
      Home
    </Link>
    <Link to="/about" style={{ padding: 5 }}>
      About
    </Link>
  </nav>
  {/* 其余代码保持不变 */}
</Router>

Перейдите в окно браузера, чтобы увидеть панель навигации в действии:

Как работать с вложенным маршрутом

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

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

В React Router v5 вложенные маршруты должны были быть определены явно, чего нет в React Router v6. Он подбирает библиотеку с именемOutlet, визуализируя любые соответствующие дочерние элементы для определенного маршрута. Во-первых, изreact-router-domимпортировать из библиотекиOutlet:

import { Outlet } from 'react-router-dom';

Чтобы имитировать базовое ведение блога, мыApp.jsДобавьте некоторые фиктивные данные в файл. Этот фрагмент кода содержитBlogPostsОбъект, который дополнительно содержит различные объекты в качестве свойств. Каждый объект состоит из трех частей:

• уникальный идентификатор
• название статьи
• Описание статьи

const BlogPosts = {
  '1': {
    title: 'First Blog Post',
    description: 'Lorem ipsum dolor sit amet, consectetur adip.'
  },
  '2': {
    title: 'Second Blog Post',
    description: 'Hello React Router v6'
  }
};

Этот уникальный фрагмент будет использоваться в URL-адресе веб-браузера для просмотра содержимого каждого сообщения. Далее создайте файл с именемPostsФункциональный компонент, отображающий список всех сообщений блога:

function Posts() {
  return (
    <div style={{ padding: 20 }}>
      <h2>Blog</h2>
      {/* 渲染任何匹配的子级 */}
      <Outlet />
    </div>
  );
}

Определите другого имениPostListsкомпонент, всякий раз, когда щелкают URL-адрес в окне браузераhttp://localhost:3000/posts отобразится список всех сообщений. давайте использовать javascript Object.entry()метод из объектаBlogPostsвозвращает массив, который будет отображаться для отображения списка заголовков для всех сообщений в блоге:

function PostLists() {
  return (
    <ul>
      {Object.entries(BlogPosts).map(([slug, { title }]) => (
        <li key={slug}>
          <h3>{title}</h3>
        </li>
      ))}
    </ul>
  );
}

ИсправлятьAppМаршрут в функциональном компоненте, например:

<Routes>
  {/* 其余代码保持不变 */}
  <Route path="posts" element={<Posts />}>
    <Route path="/" element={<PostLists />} />
  </Route>
</Routes>

Это показывает, что всякий раз, когда URL запускаетсяhttp://localhost:3000/posts отобразит список сообщений блога, поэтому компонент PostsLists:

Как получить доступ к параметрам URL и динамическим параметрам маршрутов

Чтобы получить доступ к отдельным статьям, щелкнув заголовки статей в отображаемом списке статей блога, все, что вам нужно сделать, это обернуть заголовок каждой статьи вPostsListsв компонентеLinkвнутри компонента. Затем используйтеslugОпределение каждого префикса пути прохождения бумаги/posts/Путь статьи в браузере согласуется.

<ul>
  {Object.entries(BlogPosts).map(([slug, { title }]) => (
    <li key={slug}>
      <Link to={`/posts/${slug}`}>
        <h3>{title}</h3>
      </Link>
    </li>
  ))}
</ul>

Далее, изreact-router-domимпортировать библиотеку с именемuseParamsкрюк. С помощью этого хука вы можете получить доступ к любым динамическим параметрам, которые может иметь конкретный маршрут (или слаг). каждыйslugДинамические параметры будут для каждого поста в блогеtitleа такжеdescription. Необходимость доступа к ним заключается в отображении содержимого каждого сообщения в блоге, когда определенный сегмент сообщения в блоге запускается как URL-адрес в окне браузера:

import { useParams } from 'react-router-dom';

СоздатьPostновый функциональный компонент, который будет загружаться изuseParamsХук, чтобы получить текущую статью. Используя синтаксис записи квадратных скобок в JavaScript, новыйpostПеременная, содержащая значение свойства или текущее содержимое сообщения в блоге.

function Post() {
  const BlogPosts = {
    "1": {
      title: "第一篇博客文章",
      description: "第一篇博客文章，是关于Vue3.0的"
    },
    "2": {
      title: "第二篇博客文章",
      description: "Hello React Router v6"
    }
  };
  
  const { slug } = useParams();
  const post = BlogPosts[slug];
  const { title, description } = post;
  return (
    <div style={{ padding: 20 }}>
      <h3>{title}</h3>
      <p>{description}</p>
    </div>
  );
}

Наконец, вAppДобавьте функцию с именем:slugдинамическая маршрутизация для отображения содержимого каждой статьи:

// 其余代码保持不变
<Route path="posts" element={<Posts />}>
  <Route path="/" element={<PostLists />} />
  <Route path=":slug" element={<Post />} />
</Route>

Вот полный вывод после этого шага:

Суммировать

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

Получите полный код для этого случая

• Кодыпесочнице:код sandbox.io/yes/lucid-adult…
• Гитхаб:GitHub.com/read-you-prepare/code…

Связанное Чтение

• Демистификация React useEffect
• 5 вещей, которые начинающие разработчики React могут сделать неправильно
• Синтаксис React.js и Vue.js рядом

Эта статья была впервые опубликована на официальном аккаунте «Front-end Full-Stack Developer» ID: by-zhangbing-dev, прочитайте последние статьи как можно скорее и отдайте приоритет публикации новых статей через два дня. Обратив внимание, ответьте, пожалуйста, личным письмом: Большая подарочная упаковка, отправка по сети качественных видеокурсов онлайн с информацией о дисках, безусловно, сэкономит вам много денег!