React Router Dom V4 Маршрутизация
В этом уроке мы познакомимся с библиотекой 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, то установить можно следующей командой:
1 |
npm install --save react-router-dom |
Так же можно установить через yarn:
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. Пример подключения базового роутера.
1 2 3 4 5 6 7 8 9 10 11 |
import { BrowserRouter } from "react-router-dom"; function MyApplication() { return ( <div className="App"> <BrowserRouter> {/** some **/} </BrowserRouter> </div> ) } |
Элемент Route в React Router Dom
<Route> является одним из наиболее главных элементов маршрутизации, выполняющих основную функцию библиотеки. Его идея проста: везде, где вы хотите что-то вывести, когда есть совпадение с путем адресной строки, вы должны определять Route (маршрут).
Данный класс принимает различные свойства (пропсов), например:
- Путь (path): Тип строка , в нем содержится имя пути для сопоставления с адресной строкой.
- Компонент (component): Определят имя компонента, который будет выводиться при совпадении пути.
- Точное соответствие (exact): свойство указывает Route точно соответствовать пути (см. включающую и эксклюзивную маршрутизацию)
- Строго соответствие (strict): свойство указывает Route соответствовать только маршруту с косой чертой.
Взамен свойства component есть 2 других свойства позволяющие сообщить Route, что ему нужно отобразить.
- render: Функция, возвращающая элемент React. Так же может возвращать набор вложенных элементов.
- children: Данное свойство похоже на render. Эта функция, должна вернуть компонент React. За исключением того, что этот элемент отобразиться в любому случае, даже если нет совпадения пути.
1 2 3 |
import { Route } from "react-router-dom"; <Route path="/user-profile" component={UserProfilePage} /> |
приведенный выше маршрут отобразит по url ‘/user-profile’ компонент UserProfilePage.
Пример использования свойства render:
1 2 3 4 5 6 |
import { Route } from "react-router-dom"; <Route path="/user-profile" render={() => (<div> <UserProfilePage propsFromRoute="customProp" /> </div>)} /> |
Пример использования свойства children:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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> )}/> ) |
Параметры маршрутов
Часто возникает необходимость использовать различные переменные в маршрутах, для передачи этих переменных другим страницам. Мы можем объявить переменную через двоеточие плюс имя переменной, Например:
1 2 3 |
import { Route } from "react-router-dom"; <Route path="/product/:productId" component={ProductShow}/> |
Данный маршрут будет соответствовать URL: ‘/product/10‘
Для того, что бы внутри компонента получить переменную, необходимо использовать свойство match.
1 2 3 4 5 |
<Route path="/product/:productId" component={ProductShow}/> function ProductShow({ match }){ return (<div>Товар #{match.params.productId}</div>) } |
В маршруты можно передавать неограниченное количество переменных
1 |
<Route path="/:param1/:param2/:param3" component={ProductShow}/> |
React Router Dom использование — Link
Ссылки (Link) — данный компонент React Router v4, разработанный в качестве замены простых ссылок браузеров, для создания элементов навигации приложения, который позволят пользователям перемещаться между различными страницами приложения. Обычные ссылки браузера перезагружают всю страницу, в то время как <Link/> перезагружают только те части приложения, которые соответствуют пути расположения браузера.
<Link/> принимает свойство to, которое сообщает React Router пункт назначения. Например:
1 2 3 4 5 |
import { Link } from 'react-router-dom' const Menu = () => ( <Link to='/profile-page'>Страница профиля</Link> ) |
Если нажать на эту ссылку, она отправит нас по адресу ‘/profile-page’
Link может принимать и другое свойство: replace — если установлено в true, то при переходе по ссылке в истории браузера предыдущая страница будет заменяться, а не добавляться новая. Это приведет к тому что кнопка Назад в браузере будет перебрасывать не на обратную страницу, а через одну. Replace true полезно устанавливать тогда, когда мы точно знаем что переход на предыдущую страницу пользователю не понадобиться и будет бесполезным (например после удаления какой-то записи, когда она перестанет существовать предыдущая страница может вернуть 404 ошибку).
Компонент NavLink
NavLink очень похож на Link, и выполняет ту же самую функцию, но с различием в том что он добавляет информацию о стиле к отображаемому элементу (элементам), например:
1 2 3 4 5 6 7 8 |
import { NavLink } from 'react-router-dom' <NavLink to="/my-profile" activeClassName="selected" > Мой профиль </NavLink> |
Включающая маршрутизации
По умолчанию в 4-ой версии роутера, используется включающую маршрутизацию, это значит что будут выводиться все компоненты маршрутов которые хотя бы частично совпадают с URL. В примере ниже если мы перейдем по адресу /about/contact, то выведется 3 блока — MainPage, AboutPage, ContactPage
1 2 3 |
<Route path="/" component={MainPage} /> <Route path="/about" component={AboutPage} /> <Route path="/about/contact" component={ContactPage} /> |
Что бы избежать вывода всех 3 элементов можно использовать свойство exact, которое ‘говорит’ компоненту, отображаться только если путь точно соответствует маршруту.
1 2 3 |
<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.
1 2 3 4 5 |
<Switch> <Route exact path="/" component={MainPage} /> <Route exact path="/about" component={AboutPage} /> <Route path="/about/contact" component={ContactPage} /> </Switch> |
Browser History
Реакт предполагает использование объекта истории, который определяет простой API для управления и манипулирования историей браузера. С помощью этого объекта можно выполнять редирект.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
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> ); } |
Компонент Redirect
Когда вы хотите выполнить перенаправление на иную страницу текущего приложения, в возвращаемой функции компонента можно вернуть <Redirect/>. Этот элемент имеет одно свойство ‘to‘, которое определяет маршрут перенаправления
1 2 3 |
import {Route, Redirect } from "react-router-dom"; /* *** */ <Route path="/about/contact" component={() => (<Redirect to="/"/>)} /> |
В данном примере выше, если пользователь перейдет по адресу ‘/about/contact‘, он будет перенаправлен на главную страницу. Помимо строки, параметр to может принимать объект со свойствами:
1 2 3 4 5 |
<Redirect to={ { pathname: '/login', search: '?param=techiediaries', state: { referrer: 'techiediaries.com' } } }/> |
Свойства данного объекта означают:
- pathname — название маршрута перенаправления.
- search — параметры маршрута.
- state — данные передаваемые другому компоненту.
Заключение
Библиотека, рассмотренная нами в данном уроке, упрощает создание многостраничных приложений со сложным интерфейсом, предполагающим маршрутизацию между разными частями приложения. Вы можете создать древовидную структуру маршрутов вкладывая их друг в друга, а так же использовать различные подходы к маршрутизации, такие как Включающие и исключающие маршруты. Вы также можете передавать различную информацию между маршрутами, используя параметры, которые могут быть получены и извлечены из компонентов. Все строительные блоки React Router v4, предназначенные для маршрутизации веб-приложений, доступны и могут быть импортированы из react-router-dom.