Итого по роутингу

ОБНОВЛЕНИЕ 2018: в учебнике хорошая теория, но ему уже два года. Проверяйте версии пакетов. За выходом нового учебника можно следить в telegram канале или twitter

На канале так же проводятся бесплатные вебинары, публикуются переводы и авторские материалы, присоединяйтесь!

Итого по роутингу

Если вы не планируете использовать redux - на этом разделе для вас заканчивается курс по роутингу.

Подведем итоги. Мы научились:

• изменять URL-адрес и отрисовывать нужные компоненты в соответствии с этими изменениями

• использовать основные "плюшки" react-router'a: вложения (nesting) и параметры в адресе (:param)

• ограничивать доступ к странице (на примере обработки события onEnter)

• предотвращать нежелательный уход со страницы

• подкрашивать активные ссылки (заодно рассмотрели мощный прием - обертка над компонентом (wrap component))

• программно изменять роут

В качестве бонуса:

Необязательный параметр в адресе

Перевод кода из документации:

<Route path="/hello/:name">         // совпадет с /hello/michael and /hello/ryan
<Route path="/hello(/:name)">       // совпадет с /hello, /hello/michael, and /hello/ryan
<Route path="/files/*.*">           // совпадет с /files/hello.jpg and /files/hello.html
<Route path="/**/*.jpg">            // совпадет с /files/hello.jpg and /files/path/to/file.jpg

Кроме данного бонуса, в официальных гайдах (EN) еще много чего интересного, например, если вы используете require.ensure, вам будет полезен материал - Dynamic Routing (EN)

Так же рекомендую изучить примеры.

Для тех, кто хочет идти дальше и использовать redux + react-router: давайте приберемся и вперед.

Приборка заключается в изменение компонента <Home />

src/components/Home/index.js

import React, { Component } from 'react'

export default class Home extends Component {
  render() {
    return (
      <div className='row'>
        <div className='col-md-12'>Добро пожаловать на курс по redux + react-router</div>
      </div>
    )
  }
}

P.S. приятная особенность: вы уже прошли не половину учебника, а процентов восемьдесят пять. Финал близко.