27 Апр 2020

React Router Dom V4 Маршрутизация

Опубликовано в JS, ReactJs - уроки от А до Я admin Апрель 27, 2020

В этом уроке мы познакомимся с библиотекой react-router-dom, которая используется в многостраничных приложениях для маршрутизации. Рассмотрим такие составляющие как Router, Link, NavLink, Route, Switch, Redirect, History, включенные в библиотеку react-router-dom. Наиболее подходящим способом увидеть, как работает React Router v4, является написание простого многостраничного приложения React с использованием новых компонентов маршрутизатора. Но сначала давайте разберемся чем новая версия v4 отличается от предыдущей версии v3.

Содержание

React Router v4 и React Router v3 различия
Установка react-router-dom
Использование компонента Router
Использование компонента Route
Параметры маршрутов
Использование компонента Link
Компонент NavLink
Включающая маршрутизации
Компонент Switch — Исключающая маршрутизация
Browser History
Компонент Redirect

React Router v4 и React Router v3 различия

До v4 была версия v3, v4 — это полностью обновленная версия, так в чем же разница между этими двумя маршрутизаторами React? Вот краткий список большинства отличий:

В 4-ой версии маршрутизация больше не централизована, вместо этого она становится частью всего приложения и пользовательского интерфейса.
Все элементы, предназначенные для браузера, размещаются в отдельной библиотеке react-router-dom, а не в react-router, как раньше (в v3)
Добавлены новые компоненты, такой BrowserRouter — основной способ маршрутизации в браузере и HashRouter (см. Ниже).
Больше не нужно использовать дочерние свойство для вложенных элементов.
Правила маршрутизации React Router v3 были исключающими друг друга, то есть только один маршрут мог обрабатываться одновременно. В 4 версии стала доступна поддержка вложенных маршрутов, что означает, что несколько маршрутов могут представлять древовидную вложенную структуру и отображаться одновременно.

React Router v4 был разделен на три пакета:

react-router: общие элементы ядра для версий dom и native
react-router-dom: версия dom, разработанная для браузеров или веб-приложений.
react-router-native: native версия, предназначенная для мобильных приложений.

Установка react-router-dom

Поскольку мы создаем web-приложение, а не мобильное приложение, нам необходимо установить пакет react-router-dom, поэтому внутри директории проекта необходимо выполнить одну из следующих команд:

Если вы используете npm, то установить можно следующей командой:

npm install --save react-router-dom

1	npm install --save react-router-dom

Так же можно установить через yarn:

yarn add react-router-dom

1	yarn add react-router-dom

Использование компонента Router

Использование маршрутизации в React начинается с базового элемента, который в 4-ой версии может быть одним из следующих:

BrowserRouter. Это реализация интерфейса маршрутизатора, которая использует API истории HTML5 для синхронизации пользовательского интерфейса с текущим адресом страницы браузера, то есть использует window.location.
HashRouter. Такой же, как и предыдущий маршрутизатор, но использует только hash-часть URL, то есть window.location.hash.
MemoryRouter. Компонент, который хранит информацию о маршрутах в памяти. Он не записывает и не читает эти данные из URL.
NativeRouter. Используется для маршрутизации внутри мобильных приложений.
StaticRouter. Используется для статической маршрутизации.

Главные элементы маршрутизаторов, которые используются в web-приложениях — это BrowserRouter. Немного реже использующийся элемент — HashRouter. Если на сервере с приложением используются динамические URL-адреса, нужно использовать BrowserRouter, но если ваш сервер не поддерживает динамические адреса, и работает только со статикой, тогда нужно использовать HashRouter. Пример подключения базового роутера.

import { BrowserRouter } from "react-router-dom";

function MyApplication() {
  return (
    <div className="App">
      <BrowserRouter>
        {/** some **/}
      </BrowserRouter>
    </div>
  )
}

import { BrowserRouter } from "react-router-dom";

function MyApplication() {

return (

{/** some **/}

</BrowserRouter>

</div>

)

}

Элемент Route в React Router Dom

<Route> является одним из наиболее главных элементов маршрутизации, выполняющих основную функцию библиотеки. Его идея проста: везде, где вы хотите что-то вывести, когда есть совпадение с путем адресной строки, вы должны определять Route (маршрут).
Данный класс принимает различные свойства (пропсов), например:

Путь (path): Тип строка , в нем содержится имя пути для сопоставления с адресной строкой.
Компонент (component): Определят имя компонента, который будет выводиться при совпадении пути.
Точное соответствие (exact): свойство указывает Route точно соответствовать пути (см. включающую и эксклюзивную маршрутизацию)
Строго соответствие (strict): свойство указывает Route соответствовать только маршруту с косой чертой.

Взамен свойства component есть 2 других свойства позволяющие сообщить Route, что ему нужно отобразить.

render: Функция, возвращающая элемент React. Так же может возвращать набор вложенных элементов.
children: Данное свойство похоже на render. Эта функция, должна вернуть компонент React. За исключением того, что этот элемент отобразиться в любому случае, даже если нет совпадения пути.

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

Пример использование Route:

import { Route } from "react-router-dom";

<Route path="/user-profile" component={UserProfilePage} />

import { Route } from "react-router-dom";

приведенный выше маршрут отобразит по url ‘/user-profile’ компонент UserProfilePage.

Пример использования свойства render:

import { Route } from "react-router-dom";

<Route path="/user-profile" render={() => (<div>
       <UserProfilePage propsFromRoute="customProp" />
    </div>)} 
/>

import { Route } from "react-router-dom";

</div>)}

Пример использования свойства children:

import { Route } from "react-router-dom";

<div>
  <CustomMenuLink to="/somewhere"/>
  <CustomMenuLink to="/somewhere-else"/>
</div>

const CustomMenuLink = ({ to }) => (
  <Route path={to} children={({ match }) => (
    <p className={match ? 'link-active' : ''}>
      <Link to={to}/>
    </p>
  )}/>
)

import { Route } from "react-router-dom";

<div>

</div>

const CustomMenuLink = ({ to }) => (

<Route path={to} children={({ match }) => (

</p>

)}/>

)

Параметры маршрутов

Часто возникает необходимость использовать различные переменные в маршрутах, для передачи этих переменных другим страницам. Мы можем объявить переменную через двоеточие плюс имя переменной, Например:

import { Route } from "react-router-dom";

<Route path="/product/:productId" component={ProductShow}/>

import { Route } from "react-router-dom";

Данный маршрут будет соответствовать URL: ‘/product/10‘

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

<Route path="/product/:productId" component={ProductShow}/>

function ProductShow({ match }){
  return (<div>Товар #{match.params.productId}</div>)
}

function ProductShow({ match }){

return (<div>Товар #{match.params.productId}</div>)

}

В маршруты можно передавать неограниченное количество переменных

<Route path="/:param1/:param2/:param3" component={ProductShow}/>

1	<Route path="/:param1/:param2/:param3" component={ProductShow}/>

React Router Dom использование — Link

Ссылки (Link) — данный компонент React Router v4, разработанный в качестве замены простых ссылок браузеров, для создания элементов навигации приложения, который позволят пользователям перемещаться между различными страницами приложения. Обычные ссылки браузера перезагружают всю страницу, в то время как <Link/> перезагружают только те части приложения, которые соответствуют пути расположения браузера.
<Link/> принимает свойство to, которое сообщает React Router пункт назначения. Например:

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

const Menu = () => (
    <Link to='/profile-page'>Страница профиля</Link>
)

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

const Menu = () => (

<Link to='/profile-page'>Страница профиля</Link>

)

Если нажать на эту ссылку, она отправит нас по адресу ‘/profile-page’

Link может принимать и другое свойство: replace — если установлено в true, то при переходе по ссылке в истории браузера предыдущая страница будет заменяться, а не добавляться новая. Это приведет к тому что кнопка Назад в браузере будет перебрасывать не на обратную страницу, а через одну. Replace true полезно устанавливать тогда, когда мы точно знаем что переход на предыдущую страницу пользователю не понадобиться и будет бесполезным (например после удаления какой-то записи, когда она перестанет существовать предыдущая страница может вернуть 404 ошибку).

Компонент NavLink

NavLink очень похож на Link, и выполняет ту же самую функцию, но с различием в том что он добавляет информацию о стиле к отображаемому элементу (элементам), например:

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

<NavLink
  to="/my-profile"
  activeClassName="selected"
>
  Мой профиль
</NavLink>

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

<NavLink

to="/my-profile"

activeClassName="selected"

Мой профиль

</NavLink>

Включающая маршрутизации

По умолчанию в 4-ой версии роутера, используется включающую маршрутизацию, это значит что будут выводиться все компоненты маршрутов которые хотя бы частично совпадают с URL. В примере ниже если мы перейдем по адресу /about/contact, то выведется 3 блока — MainPage, AboutPage, ContactPage

<Route path="/" component={MainPage} />
<Route path="/about" component={AboutPage} />
<Route path="/about/contact" component={ContactPage} />

Что бы избежать вывода всех 3 элементов можно использовать свойство exact, которое ‘говорит’ компоненту, отображаться только если путь точно соответствует маршруту.

<Route exact path="/" component={MainPage} />
<Route exact path="/about" component={AboutPage} />
<Route path="/about/contact" component={ContactPage} />

Компонент Switch — Исключающая маршрутизация

Исключающая маршрутизация является инверсией включающей маршрутизации. React Router v3 по умолчанию работал именно так. Отображалось только первое совпадение. В v4 можно сделать тоже самое, используя компонент Switch. В Switch будет отображаться только первый элемент <Route> или <Redirect> который соответствует URL.

<Switch>
  <Route exact path="/" component={MainPage} />
  <Route exact path="/about" component={AboutPage} />
  <Route path="/about/contact" component={ContactPage} />
</Switch>

</Switch>

Browser History

Реакт предполагает использование объекта истории, который определяет простой API для управления и манипулирования историей браузера. С помощью этого объекта можно выполнять редирект.

import { createBrowserHistory } from 'history'

const history = createBrowserHistory();

function App() {
  
  function handleClick(){
    history.push('/about/contact')
  }  

  return (
    <div>
    <button onClikc={handleClick}>Редирект</button>
    <BrowserRouter history={history}>
      <Switch>
          <Route exact path="/" component={() => (<div>Главная страница</div>)} />
          <Route exact path="/about" component={() => (<div>Страница о компании</div>)} />
          <Route path="/about/contact" component={() => (<div>Страница контактов</div>)} />
      </Switch>
    </BrowserRouter>
    </div>
  );
}

import { createBrowserHistory } from 'history'

const history = createBrowserHistory();

function App() {

function handleClick(){

history.push('/about/contact')

}

return (

<div>

<button onClikc={handleClick}>Редирект</button>

<Route exact path="/" component={() => (<div>Главная страница</div>)} />

<Route exact path="/about" component={() => (<div>Страница о компании</div>)} />

<Route path="/about/contact" component={() => (<div>Страница контактов</div>)} />

</Switch>

</BrowserRouter>

</div>

);

}

Компонент Redirect

Когда вы хотите выполнить перенаправление на иную страницу текущего приложения, в возвращаемой функции компонента можно вернуть <Redirect/>. Этот элемент имеет одно свойство ‘to‘, которое определяет маршрут перенаправления

import {Route, Redirect } from "react-router-dom";
/* *** */
<Route path="/about/contact" component={() => (<Redirect to="/"/>)} />

import {Route, Redirect } from "react-router-dom";

/* *** */

В данном примере выше, если пользователь перейдет по адресу ‘/about/contact‘, он будет перенаправлен на главную страницу. Помимо строки, параметр to может принимать объект со свойствами:

<Redirect to={ {
  pathname: '/login',
  search: '?param=techiediaries',
  state: { referrer: 'techiediaries.com' }
} }/>

<Redirect to={ {

pathname: '/login',

search: '?param=techiediaries',

state: { referrer: 'techiediaries.com' }

} }/>

Свойства данного объекта означают:

pathname — название маршрута перенаправления.
search — параметры маршрута.
state — данные передаваемые другому компоненту.

Заключение

Библиотека, рассмотренная нами в данном уроке, упрощает создание многостраничных приложений со сложным интерфейсом, предполагающим маршрутизацию между разными частями приложения. Вы можете создать древовидную структуру маршрутов вкладывая их друг в друга, а так же использовать различные подходы к маршрутизации, такие как Включающие и исключающие маршруты. Вы также можете передавать различную информацию между маршрутами, используя параметры, которые могут быть получены и извлечены из компонентов. Все строительные блоки React Router v4, предназначенные для маршрутизации веб-приложений, доступны и могут быть импортированы из react-router-dom.

React Router v4 и React Router v3 различия

Установка react-router-dom

Использование компонента Router

Элемент Route в React Router Dom

Параметры маршрутов

React Router Dom использование — Link

Компонент NavLink

Включающая маршрутизации

Компонент Switch — Исключающая маршрутизация

Browser History

Компонент Redirect

Заключение

Похожие записи

Добавить комментарий Отменить ответ