> For the complete documentation index, see [llms.txt](https://max-frontend.gitbook.io/react-router-course-ru/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://max-frontend.gitbook.io/react-router-course-ru/sozdaem_primitivnii_router.md).

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

*ОБНОВЛЕНИЕ 2018: в учебнике хорошая теория, но ему уже два года. Проверяйте версии пакетов. За выходом нового учебника можно следить в* [*telegram канале*](http://bit.ly/2FI9nhs) *или* [*twitter*](http://bit.ly/2FU6zRL)

*На* [*канале*](http://bit.ly/2FI9nhs) *так же проводятся бесплатные вебинары, публикуются переводы и авторские материалы,* [*присоединяйтесь*](http://bit.ly/2FI9nhs)*!*

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

*Для создания этого раздела я не стал выдумывать "велосипед" и взял пример из* [*офф.документации*](https://github.com/reactjs/react-router/blob/latest/docs/Introduction.md) *подправив его под наши нужды.*

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

Сейчас, мы будем изменять лишь часть URL-адреса (после #). Для прослушивания такого рода изменений, воспользуемся событием [hashchange](https://developer.mozilla.org/en-US/docs/Web/Events/hashchange).

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

*src/components/Admin.js*

```javascript
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*

```javascript
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*

```javascript
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*

```javascript
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](/files/-LvLn_conI3aF5mbVEJ8)

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

![not child variable](/files/-LvLn_cqbAtAAaJdnP6A)

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

[Исходный код](https://github.com/maxfarseer/react-router-ru-tutorial/tree/create_simple_router) на данный момент.