РЕАКТ РОУТЕР

Что такое маршрутизация?
Маршрутизация — это процесс, в ходе которого веб-приложение использует текущий URL (Uniform Resource Locator) браузера, чтобы определить, какое содержимое показать пользователю.
Например, пользователь, посетивший страницу /wiki/Node.js в Википедии, ожидает увидеть нечто отличное от страницы /wiki/React_(JavaScript_library).

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

  1. Каждый URL — это, по сути, запрос на какой-то ресурс, и каждый компонент URL служит для указания желаемого ресурса. URL состоит из нескольких компонентов, некоторые из которых являются обязательными, а некоторые — необязательными:
  2. Схема (например, HTTP, HTTPS, mailto и т.д.), которая определяет, какой протокол должен использоваться для доступа к ресурсу.
  3. Домен (например, codecademy.com), который определяет веб-сайт, на котором размещен ресурс. Домен служит точкой входа для вашего приложения.
  4. Путь (например, /articles), который определяет конкретный ресурс или страницу, которая должна быть загружена и показана пользователю. Именно здесь начинается маршрутизация!
  5. Необязательная строка запроса (например, ?search=node), которая появляется после символа ‘?’ и присваивает значения параметрам. Обычно строки запроса используются для поиска параметров и фильтров.

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

Установка React Router
Чтобы использовать React Router, вам необходимо включить пакет react-router-dom (версия React Router, созданная специально для веб-браузеров) в свой проект с помощью npm, как показано ниже:

npm install --save react-router-dom@5.2.0
Войти в полноэкранный режим Выйти из полноэкранного режима

После добавления react-router-dom в ваш проект вы можете импортировать один из его компонентов маршрутизатора, чтобы добавить маршрутизацию в ваш проект.
React Router предоставляет несколько компонентов маршрутизации, однако наиболее распространенным из них является BrowserRouter.
Для простоты и удобочитаемости при импорте принято называть BrowserRouter псевдонимом Router, например, так:

import { BrowserRouter as Router} from ‘react-router-dom’
Войти в полноэкранный режим Выйти из полноэкранного режима

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

Первым шагом является рендеринг компонента Router в качестве компонента верхнего уровня в вашем приложении.

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

export default function App () {
  return (
    <Router>
      {/* Application views are rendered here */
    </Router>
  )
}

Вход в полноэкранный режим Выход из полноэкранного режима

Если сделать Router компонентом верхнего уровня, изменения URL не приведут к перезагрузке страницы**.
Вместо этого изменения URL позволят Router определить, какой из его дочерних компонентов следует отобразить, передавая информацию о пути к текущему URL в качестве реквизита.

Базовая маршрутизация с
Установив компонент Router, мы можем начать определять различные представления, или маршруты, которые наше приложение будет отображать для различных путей URL.
Например, мы можем захотеть отобразить компонент About для пути /about и компонент SignUp для пути /sign-up.
Для этого мы должны использовать компонент Route, предоставляемый пакетом react-router-dom. Этот компонент можно импортировать вместе с BrowserRouter следующим образом:

import { BrowserRouter as Router, Route } from `react-router-dom`
Войти в полноэкранный режим Выйти из полноэкранного режима

Компонент Route предназначен для рендеринга (или не рендеринга) компонента на основе текущего пути URL. Каждый компонент Route должен:

  1. отображаться внутри маршрутизатора.
  2. иметь параметр path, указывающий путь URL, который будет вызывать рендеринг маршрута.
  3. обернуть компонент, который мы хотим отобразить в случае, если путь совпадает. Например, следующий маршрут отображает компонент About, когда путь URL совпадает с ‘/about’:
<Router>
  <Route path='/about'>
    <About />
  </Route>
</Router>
Войти в полноэкранный режим Выйти из полноэкранного режима

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

<Router>

  {/* Renders when the URL matches '/about' */
  <Route path='/about'>  
    <About />
  </Route>

  {/* Always renders */}
  <Route>
    <Sidebar />
  </Route>

</Router>
Вход в полноэкранный режим Выход из полноэкранного режима

В то время как другие парадигмы маршрутизации являются статическими (например, маршруты предопределены до и отдельно от процесса рендеринга), философия React Router является декларативной и динамической.
Это означает, что маршруты появляются в процессе рендеринга. Хотя это может показаться более сложным, чем статическая настройка маршрутов, это также более гибко.

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

Например, представьте себе сайт технических новостей, где каждая статья доступна по пути ‘/articles/’ + someTitle, где someTitle отличается для каждой статьи.

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

Вместо этого нам лучше выразить шаблон на высоком уровне с помощью одного маршрута, который может соответствовать любому пути вида ‘/articles/’ + someTitle и при этом знать, какая статья должна быть отображена. React Router позволяет нам сделать это, используя параметры URL для создания динамических маршрутов.

Параметры URL — это динамические сегменты URL, которые служат в качестве держателей для более конкретных ресурсов, которые URL должен отображать. Они появляются в динамическом маршруте в виде двоеточия (:), за которым следует имя переменной, например, так:

<Route path='/articles/:title'>
  <Article />
</Route>
Войти в полноэкранный режим Выйти из полноэкранного режима

Давайте разберем это кратко:

  1. В этом примере путь ‘/articles/:title’ содержит параметр URL :title.
  2. Это означает, что когда пользователь переходит на такие страницы, как ‘/articles/what-is-react’ или ‘/articles/html-and-css’, компонент будет отображаться.
  3. Когда компонент Article отображается таким образом, он может получить доступ к фактическому значению параметра URL :title (what-is-react или html-and-css), чтобы определить, какую статью отобразить (подробнее об этом в следующем упражнении).

Один маршрут может даже иметь несколько параметров (например, ‘/articles/:title/comments/:commentId’) или ни одного (например, ‘/articles’).
Чтобы сделать параметр URL необязательным, можно добавить символ ‘?’ в конец имени параметра URL (например, ‘/articles/:title?’).

В этом случае дочерний компонент маршрута будет отображаться, когда URL будет соответствовать либо /articles/what-is-react, либо просто /articles.

useParams

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

React Router предоставляет хук, useParams(), для доступа к значению параметров URL. При вызове useParams() возвращает объект, который сопоставляет имена параметров URL с их значениями в текущем URL.

Например, рассмотрим приведенный ниже компонент Articles, который отображается при прохождении маршрута с динамическим URL ‘/articles/:title’. Предположим, пользователь посещает /articles/objects:

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

// Rendered when the user visits '/articles/objects'
export default function Article() {

  let { title } = useParams();
  // title will be equal to the string 'objects'

  // The title will be rendered in the <h1>
  return (
    <article>
      <h1>{title}</h1>
      // ...
    </article>
  );
}
Войти в полноэкранный режим Выход из полноэкранного режима

и точно
По своей конструкции маршрутизатор отображает все маршруты, пути которых совпадают с текущим URL. Это позволяет нам создавать макеты, в которых несколько компонентов должны появляться или исчезать в зависимости от текущего URL (например, приложение, в котором боковая панель и основной дисплей реагируют на изменения текущего URL). Но иногда такой выбор дизайна может привести к непредвиденным результатам.

Рассмотрим следующую (относительно распространенную) настройку:

<Router>
  <div>
    <Route path='/articles/new'>
      <NewArticle />
    </Route>
    <Route path='/articles/:title'>
      <Article />
    </Route>
    <Route path='/articles'>
      <Articles />
    </Route>
  </div>
</Router>
Вход в полноэкранный режим Выход из полноэкранного режима

Что должно произойти, когда пользователь перейдет к ‘articles/new’? Должен появиться компонент NewArticle, верно?

На самом деле происходит то, что ВСЕ маршруты совпадают:

  • /articles/new точно совпадает
  • /articles/:title будет соответствовать new параметру URL :title
  • /articles будет соответствовать, потому что оба маршрута начинаются с /articles.

Так как все маршруты совпадают, приложение отобразит следующие параметры
NewArticle, Article и Articles одновременно.

React Router предоставляет несколько механизмов для предотвращения такого рода непреднамеренного рендеринга. Первый из них — компонент Switch:

import { Switch } from 'react-router-dom';
Войти в полноэкранный режим Выход из полноэкранного режима

Когда Switch обернут вокруг коллекции маршрутов, он отобразит первый из своих дочерних маршрутов, чей путь совпадает с текущим URL.

<Switch>
  <div>
    <Route path='/articles/new'>
      <NewArticle />
    </Route>
    <Route path='/articles/:title'>
      <Article />
    </Route>
    <Route path='/articles'>
      <Articles />
    </Route>
  </div>
</Switch>
Войти в полноэкранный режим Выход из полноэкранного режима

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

<Switch>
  <div>
    <Route path='/articles/:title'>
      <Article />
    </Route>
    <Route path='/articles/new'>
      <NewArticle />
    </Route>
    <Route path='/articles'>
      <Articles />
    </Route>
  </div>
</Switch>
Вход в полноэкранный режим Выход из полноэкранного режима

Теперь представьте, что пользователь переходит по адресу ‘/articles/new’. Switch отображает первый маршрут с соответствующим путем, ‘/articles/new’ соответствует ‘/articles/:title’, поскольку :title является динамическим сегментом. Если маршруты перечислены в таком порядке, компонент NewArticle никогда не отобразится. В целом, вы можете избежать этой проблемы, перечисляя маршруты от наиболее к наименее специфичным.
Иногда вы можете захотеть использовать композитность React Router и выводить несколько маршрутов одновременно (это не позволит вам использовать компонент Switch), при этом гарантируя, что ваш маршрутизатор различает статические пути и пути, включающие параметры URL. Рассмотрим следующий пример:

<Router>
  <div>
    <Route path='/'>
      <Home />
    </Route>
    <Route path='/sign-up'>
      <SignUp />
    </Route>
  </div>
</Router>
Вход в полноэкранный режим Выход из полноэкранного режима

Любой путь будет соответствовать первому маршруту, поэтому компонент Home будет отображаться независимо от того, находится ли пользователь по адресу ‘/’ или ‘/sign-up’. Это может быть идеальным поведением, если компонент, отображаемый по маршруту ‘/’, должен отображаться независимо от текущего маршрута.
Но что, если вы хотите, чтобы компонент Home был виден только пользователям на главной странице, но не тем, кто перешел к /sign-up? Используя React Router’s exact prop для первого маршрута, вы можете гарантировать, что маршрут будет соответствовать только в том случае, если текущий URL является точным совпадением.

<Route exact path='/'>
   <Home />
 </Route>
Вход в полноэкранный режим Выход из полноэкранного режима

Теперь, когда пользователь посетит /, будет отображаться компонент Home. Но когда пользователь посетит /sign-up, будет соответствовать только второй маршрут и будет отображаться только компонент SignUp.

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

Вот продолжение:

https://dev.to/kibetamos/nested-routes-react-router-2m54

Оцените статью
Procodings.ru
Добавить комментарий