React-Router простое руководство.

Всем привет И сегодня я вам хочу рассказать что такое реакт-роутер.

Работу простого реакт-роутера вы можете увидеть здесь

Итак, давайте начнём сначала и определим, что вообще такое роутер?

Это такой небольшой программный модуль который помогает нам распоряжаться нашими Url - адресами в браузере. Если всё что мы делали ранее было размещено на одной странице и поэтому в роутере смысла никакого не было, то теперь мы можем с помощью роутера разбивать информацию на нашей странице на некоторые такие логические куски. То есть на заглавной странице у нас будет одна информация, на странице контактов - другая. На странице "О нас" - третья и т.д.

Если говорить конкретно о реализации роутера в react приложении, то есть, как минимум три способа как это можно сделать:

1. - это написать свой собственный роутер.
2. - использовать стороннюю библиотеку в которой уже реализован роутер, например Ember.js или другие какие-нибудь.
3. - использовать специальный npm package который называется реакт-роутер.

Поскольку первый вариант нужно очень долго зарабатывать чтобы он был похож на хороший роутер 2-ой вариант немного выбивается из общей картины нашего react приложения, мы будем использовать 3-ий вариант, а именно - npm module react-router.

Само реакт-приложение мы развернем с помощью create-react-app.

В общем поехали!
И так первое что нужно сделать это установить create-react-app, то есть - нашу заготовку для react приложения.

Установка самого React-приложения.

Перейдем на страницу этого модуля facebook/create-react-app и здесь вы можете подчеркнуть всю необходимую для себя информацию.

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

Вы можете делать так, как вам более удобно. Я использую новый вариант установки. Он будет зависеть от версии вашего npm. Чтобы узнать ее, вам нужно открыть терминал или КС(командная строка, окно команд) в Windows. ⊞ Win + R, написать - cmd и нажать Enter.

npm -v

Если вы предпочитаете развернуть проект из глобально установленного, то вы можете просто выполнить команду:

create-react-app name_your_project_folder

Итак, установка завершилась и нам предлагает сразу же перейти в папку с нашим приложением, что мы и сделаем.

cd name_your_project_folder

И теперь, чтобы запустить приложение нужно набрать:

npm start

А перейдя по адресу: http://localhost:3000/ вы увидите работающее приложение.

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

Теперь на очереди реакт-роутер.

Устанавливаем react-router

Посмотреть документацию можно по ссылке: ReactTraining/react-router

Поскольку реакт-роутер не входит в стандартный набор, то мы должны установить его вручную.

Для того чтобы это сделать, нужно остановить сервер и перейти в командную строку Ctrl + C -> y и нажать Enter.

Здесь пишем следующее:

npm install react-router --save

и ставим флажок --save чтобы сохранить его package.json зависимости.

Также нам понадобится ещё один дополнительный модуль это react-router-dom, который позволяет нам более легко оперировать с процессом роутинга.

npm install react-router-dom --save

Можно сделать и одной командой:

npm install react-router react-router-dom --save

Теперь можем переходить непосредственно к созданию самого роутера.

Пишем роутер.

Итак, я захожу в папку со своей приложением и чтобы редактировать приложение созданное с помощью create-react-app, нам необходимо редактировать файл App.js и index.js в папке src.

Если мы вернемся на нас нашу страничку, где можно скачать модуль react-router, то здесь вы увидите что они нам демонстрируют два варианта использования данного плагина 1-ый с использованием ES6 и второй это CommonJS. То есть, по сути разница между ними никакой нет.

Если рассмотреть более подробно файл App.js, то вверху мы импортируем сначала react и компонент чтобы не писать React.Component каждый раз при создание нового компонента.

Далее, импортируют Logo для того чтобы создать нашу картинку. Здесь ничего нестандартного. Все это я рассказывал в своих постах о REACT ранее.

Поскольку нам это приложение уже не нужно, то мы удаляем все из файла App.js.

Итак начнем. Чистый файл App.js.
Я сначала импортирую все необходимые нам модули.

import React, { Component } from 'react';

Далее импортируем несколько новых компонентов из библиотеки react-router. Если вы хотите импортировать именно компоненты вам нужно их указывать в фигурных скобках, как Component, выше. Если же нет, то можно писать просто как импорт React.

Импортируем необходимые компоненты из react-router-dom

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

И так что делают компоненты?

BrowserRouter - тот самый роутер. Он использует HTML5 History API и следит за тем чтобы ваш UI был всегда синхронизирован с тем что написано в адресной строке.

Следующий Route - он отвечает за отображение непосредственного UI И следит за тем чтобы пути совпадали между компонентом и адресной строкой.

и Link - это такая немножко видоизмененная ссылка под react для редиректа на нужную нам страницу.

Также я рекомендую сделать еще одну небольшую вещь:

import createBrowserHistory from 'history/createBrowserHistory';

---

UPDATE:В последней версии реакт-роутера, рекомендуют импортировать и подключать так:
import { createBrowserHistory } from "history";
const history = createBrowserHistory();

---

Это нужно для того, чтобы импортировать createBrowserHistory. Дополнительный модуль history устанавливается вместе с установкой react-router. Он нужен он для того чтобы наше джаваскрипт приложение вело свою историю одинаково, независимо от той среды в которой оно находится.

И давайте сразу его заключим некоторую константу.

const history = createBrowserHistory();

Скобки - поскольку эта функция.

Далее, нам необходимо создать примеры наших страниц, которые мы будем использовать.

Я создам самую самую элементарную базовую структуру нашего сайта. При желании Вы можете усложнить и это будет не так сложно сделать.

На этом этапе я будут все наши страницы писать в одном файле, но если говорить о нормальном приложение то каждая новая компонента должна быть в своём собственном файле. Просто имейте это виду.

Первая страница которой она у нас будет это страница Home

const Home и используем стрелочные функции, но попрошу заметить, что мы здесь использовали второй раз круглые скобки из-за того чтобы мы не использовали фигурные скобки. Разница между фигурными и обычными скобками заключается в том, что обычные скобки возвращают всего лишь одну строку кода, а фигурные скобки много строк кода.

Но поскольку у нас JSX элемент является по факту одним элементом и занимает одну строку, мы можем использовать смело круглые скобки.

И это будет абсолютно нормально.

Продублирую этот компонент несколько раз и переименуем и вот что получилось:

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
);

const About = () => (
  <div>
    h<2>About</h2>
  </div>
);

const Contacts = () => (
  <div>
    <h2>Contacts</h2>
  </div>
);

Теперь начинается самое интересное!

Нам необходимо создать наш роутер. Роутер - Это такой же компонент как и все остальные. Приведу код файла App.js полностью, а ниже - пояснения. Создаем его:

import React, { Component } from 'react';

import { BrowserRouter, Route, Link } from 'react-router-dom';
import createBrowserHistory from 'history/createBrowserHistory';

const history = createBrowserHistory();

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
);

const About = () => (
  <div>
    <h2>About</h2>
  </div>
);

const Contacts = () => (
  <div>
    <h2>Contacts</h2>
  </div>
);

class Menu extends Component {
  render() {
    return (
      <BrowserRouter history={history}>
        <div>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/contacts">Contacts</Link></li>
          </ul>
          <hr />
          <Route exact path="/" component={Home} />
          <Route exact path="/about" component={About} />
          <Route path="/contacts" component={Contacts} />
        </div>
      </BrowserRouter>
    );
  }
}

export default Menu;

BrowserRouter это есть непосредственно роутер. К нему мы напишем сразу же атрибут history, то есть мы используем константу history для того, чтобы использовать history/createBrowserHistory библиотеку.

Дальше у нас идёт обычный div и в нём уже будут заключительные наши ссылки и пути к ним.

Их поместим внутри списка ul.

Внутри каждого тега li у нас будет находиться компонент Link, который мы подключили вверху файла.

Каждый Link имеет специальный атрибут to и он и отвечает за то, на какую страницу у нас будет идти редирект.

1 -ый у нас будет идти на страницу Home. Обычно её отображает как слэш - "/".

2 -ой нас будет вести на страницу About, и так далее.

Дальше, для визуального разделения навигации и контента страницы, напишем стандартный тег <hr />

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

Данный компонент принимает параметр path. Тут мы указываем такой же путь, как мы указали в линках и указан параметр component, который отвечает за рендер именно того компонента который нам нужен.

В данном случае, нам нужен компонент Home По такому же принципу заполняем и другие роуты.

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

Чтобы это сделать напишем внизу файла:

export default Menu;

Теперь нужно внести некоторые изменения в файл index.js

import Menu from './App';

ReactDOM.render(<Menu />, document.getElementById('root'));

Мы импортировали Menu, вместо App, и рендерить на страницу - отправляем Menu, а не App.

Можно смотреть браузер.

Вот мы видим наши простенькое структура. У нас есть наши "кнопки-стрелялки" которые мы указали, и рендер нашей странице, за которую отвечает каждый Link.

То есть, если мы находимся по адресу localhost: 3000 - это является адресом страницы Home. Если же мы нажмем на кнопку Аbout, то рендерится компонент Аbout, но как вы уже заметили почему-то наша компонент Home не пропал!

Это происходит потому, что в нашем коде необходимо указать дополнительные параметр - exact.

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

Если мы сейчас придём на нашу страницу, то компонент Home рендерится только тогда, когда мы находимся на нашей главной странице.

Чтобы это наглядно продемонстрировать, я могу дописать exact, например к ссылке About.

Теперь, если я захожу на вкладку About, в адресной строке написано - about, и если я через слэш допишу ещё какую-нибудь абракадабру конечно же такой ссылки нету, то наш компоненты About уже не высвечивается.

Можете сами в этом убедиться.

Но если же я уберу здесь exact то чтобы мы здесь не написали компонент About будет рендерится всё равно.

Об этом следует помнить!

А вообще, обо всех react-router методах и компонентах, вы можете почитать в официальной документации - reacttraining.com.

Всё достаточно адекватно написано и особенно радует что здесь есть примеры, которые можно использовать в реальных проектах. Это очень удобно. Просто копируете их в ваш проект и всё.

Файлы проекта, на этом этапе, вы можете увидеть по адресу: router-react-abc ci -m"React-Router simple" (ci -m - коммит).

Для простоты дальнейшего использования, масштабирования, я решил разделить компоненты. Для этого я создал папку components в папке src и каждый компонент поместил в отдельный файл с соответствующим названием.

Эти компоненты я подключил в файл App.js. Для примера, добавил еще один файл компонента - Blog.js

Файлы проекта, на этом этапе, вы можете увидеть по адресу: router-react-abc ci -m"Split application into components." (ci -m - коммит).

Это всё что я хотел вам сегодня рассказать. До встречи!