В этом уроке мы познакомимся с библиотекой 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 различия
- Установка react-router-dom
- Использование компонента Router
- Элемент Route в React Router Dom
- Параметры маршрутов
- React Router Dom использование — 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.
