Создаем примитивный роутер

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

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

Создаем примитивный роутер

Для создания этого раздела я не стал выдумывать "велосипед" и взял пример из офф.документации подправив его под наши нужды.

Что есть роутинг в простом варианте? Соответствие URL-адреса некоему состоянию нашего приложения. Скорее всего: соответствие адреса "рендеру" (render) какого-то ключевого компонента.

Сейчас, мы будем изменять лишь часть URL-адреса (после #). Для прослушивания такого рода изменений, воспользуемся событием hashchange.

Создадим три одинаковых компонента:

src/components/Admin.js

import React, { Component } from 'react'
export default class Admin extends Component {
render() {
return (
<div className='row'>
<div className='col-md-12'>Раздел /admin</div>
</div>
)
}
}

src/components/Genre.js

import React, { Component } from 'react'
export default class Genre extends Component {
render() {
return (
<div className='row'>
<div className='col-md-12'>Раздел /genre</div>
</div>
)
}
}

src/components/Home.js

import React, { Component } from 'react'
export default class Home extends Component {
render() {
return (
<div className='row'>
<div className='col-md-12'>Раздел /</div>
</div>
)
}
}

Добавим логики в компонент <App />, чтобы если хэш (часть URL-адреса после #) равна /admin - показывай содержимое компонента <Admin />, если равна /genre - <Genre />, иначе показывай содержимое <Home />.

src/containers/App.js

import React, { Component } from 'react'
import Admin from '../components/Admin'
import Genre from '../components/Genre'
import Home from '../components/Home'
export default class App extends Component {
constructor(props) {
super(props)
this.state = {
route: window.location.hash.substr(1)
}
}
componentDidMount() {
window.addEventListener('hashchange', () => {
this.setState({
route: window.location.hash.substr(1)
})
})
}
render() {
let Child
switch (this.state.route) {
case '/admin': Child = Admin; break;
case '/genre': Child = Genre; break;
default: Child = Home;
}
return (
<div className='container'>
<h1>App</h1>
<ul>
<li><a href='#/admin'>Admin</a></li>
<li><a href='#/genre'>Genre</a></li>
</ul>
<Child />
</div>
)
}
}

Покликайте ссылки. Никакой магии в очередной раз.

В момент componentDidMount мы подписались на прослушивание события изменения hash-части URL-адреса. Изменяя state мы вызываем ре-рендер (повторный рендер) компонента и поэтому в переменной Child оказывается нужное значение. Таким образом запись <Child /> превращается в <Admin />, <Genre /> или <Home /> соответственно.

route genre

Обратите внимание, корректная запись именно <Child />, а не <{Child} />.

not child variable

Итого: Мы разобрали процесс реализации примитивного роутинга в react-приложении.

Исходный код на данный момент.