51 lines
3.8 KiB
Markdown
51 lines
3.8 KiB
Markdown
---
|
||
title: React Router
|
||
localeTitle: React Router
|
||
---
|
||
|
||
# React Router для начинающих
|
||
|
||
# Установка
|
||
|
||
React Router был разбит на три пакета: `react-router` , `react-router-dom` и `react-router-native` .
|
||
|
||
Вам почти никогда не придется устанавливать react-router напрямую. Этот пакет предоставляет основные компоненты и функции маршрутизации для приложений React Router. Оставшиеся два пакета предоставляют компоненты специфические для среды исполнения (браузеры и react-native), но оба они также экспортируют все необходимое, что экспортируется пакетом react-router.
|
||
|
||
Мы создаем веб-сайт (что-то, что будет запускаться в браузерах), поэтому мы установим response-router-dom.
|
||
|
||
`npm install --save react-router-dom`
|
||
|
||
# Маршрутизатор
|
||
|
||
При запуске нового проекта вам необходимо определить, какой тип маршрутизатора использовать. В нашем случае, для проектов работающих в браузере, существуют `<BrowserRouter>` и `<HashRouter>`. `<BrowserRouter>` следует использовать, когда у вас есть сервер, который будет обрабатывать динамические запросы (знает, как реагировать на любой возможный URI), в то время как `<HashRouter>` должен использоваться для статических веб-сайтов (где сервер может отвечать только на запросы файлов, о которых он знает).
|
||
|
||
Обычно рекомендуется использовать `<BrowserRouter>`, но если ваш сайт будет размещен на сервере, который обслуживает только статические файлы, то маршрутизатор `<HashRouter>` является хорошим решением.
|
||
|
||
Для нашего проекта мы сделаем допущение, что веб-сайт поддерживаться динамическим сервером, поэтому нашим компонентом маршрутизатора будет является `<BrowserRouter>` .
|
||
|
||
# Импортирование
|
||
|
||
```javascript
|
||
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
|
||
```
|
||
|
||
## Компонент Link
|
||
|
||
Теперь давайте добавим навигацию, чтобы у нас получилось перемещаться между страницами.
|
||
|
||
Для этого мы будем использовать компонент `<Link>` . Использование компонента `<Link>` похоже на использование тегов ссылок в html.
|
||
|
||
Из официальной документации:
|
||
|
||
Основной способ реализации перемещения по вашему приложению. Компонент `<Link>` отрисовывает полностью рабочий тег ссылки, с соответствующим адресом href. Для начала создадим компонент Nav. Наш компонент Nav будет содержать компоненты `<Link>` и выглядит следующим образом:
|
||
|
||
```javascript
|
||
|
||
const Nav = () => (
|
||
<div>
|
||
<Link to='/'>Home</Link>
|
||
<Link to='/address'>Address</Link>
|
||
</div>
|
||
)
|
||
```
|