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

*ОБНОВЛЕНИЕ 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) на данный момент.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://max-frontend.gitbook.io/react-router-course-ru/sozdaem_primitivnii_router.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.