3.8 KiB

Raw Blame History

title	localeTitle
React Router	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> .

Импортирование

import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

Компонент Link

Теперь давайте добавим навигацию, чтобы у нас получилось перемещаться между страницами.

Для этого мы будем использовать компонент <Link> . Использование компонента <Link> похоже на использование тегов ссылок в html.

Из официальной документации:

Основной способ реализации перемещения по вашему приложению. Компонент <Link> отрисовывает полностью рабочий тег ссылки, с соответствующим адресом href. Для начала создадим компонент Nav. Наш компонент Nav будет содержать компоненты <Link> и выглядит следующим образом:


const Nav = () => (
  <div>
    <Link to='/'>Home</Link>&nbsp;
    <Link to='/address'>Address</Link>
  </div>
 )

3.8 KiB Raw Blame History Unescape Escape