> 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/podklyuchaem_react-router/browserhistory_vs_hashhistory.md).
# BrowserHistory vs HashHistory
*ОБНОВЛЕНИЕ 2018: в учебнике хорошая теория, но ему уже два года. Проверяйте версии пакетов. За выходом нового учебника можно следить в* [*telegram канале*](http://bit.ly/2FI9nhs) *или* [*twitter*](http://bit.ly/2FU6zRL)
*На* [*канале*](http://bit.ly/2FI9nhs) *так же проводятся бесплатные вебинары, публикуются переводы и авторские материалы,* [*присоединяйтесь*](http://bit.ly/2FI9nhs)*!*
## BrowserHistory vs HashHistory
*(глава для расширения кругозора)*
До текущего времени мы использовали *browserHistory* (смотри *src/index.js*).
Можно использовать и *hashHistory*. Замените в *src/index.js* все вхождения browserHistory на hashHistory, откройте снова `localhost:3000`, видите в адресе #? Покликайте по ссылкам.
"Мусор" в адресе используется так сказать, для того чтобы приблизиться к нативному поведению браузера. Что-то вроде уникального ключа. (дословно [здесь](https://github.com/reactjs/react-router-tutorial/tree/master/lessons/02-rendering-a-route) (EN)).
Спрашивается, зачем нам *hashHistory* ? Ответ простой - если использовать *hashHistory*, придется меньше телодвижений делать для настройки роутинга на сервере. Давайте вернемся к *browserHistory*, а так же добавим компонент ``.
*src/components/NotFound.js*
```javascript
import React, { Component } from 'react'
import { Link } from 'react-router'
export default class NotFound extends Component {
render() {
return (
Страница не найдена. Вернуться на главную?
)
}
}
```
Добавим `` в список роутов:
```javascript
import 'babel-polyfill'
import React from 'react'
import { render } from 'react-dom'
import App from './containers/App'
import Admin from './components/Admin'
import Genre from './components/Genre'
import Home from './components/Home'
import NotFound from './components/NotFound'
import { Router, Route, IndexRoute, browserHistory } from 'react-router'
render(
{/* для всех остальных роутов: показывай NotFound */}
,
document.getElementById('root')
)
```
Попробуйте открыть
А теперь -
Почему? Зайдите на вкладку Network и проверьте, что отдает сервер внутри *bundle.js*
Корректный *bundle.js* для
Некорректный *bundle.js* для
Как думаете, в чем проблема?
Ответ кроется во фразе: "нам придется меньше телодвижений делать для настройки роутинга на сервере". Посмотрите сами
*server.js*
```javascript
app.get(/.*/, function root(req, res) {
res.sendFile(__dirname + '/index.html');
});
```
Переведем написанное: на все запросы отдавай **index.html**. Код *index.html* предельно прост:
*index.html*
```markup
React Router [RU]Tutorial
```
Тем не менее, здесь допущена ошибка! Используется относительный путь для файла *bundle.js*, снова посмотрим в консоль хрома:
К счастью, такую ошибку легко исправить, и мы по прежнему можем лицезреть красивый вид адресов, используя *browserHistory*.
*index.html*
```markup
React Router [RU]Tutorial
```
Не забудьте перезапустить webpack, так как *index.html* не находится под наблюдением для пересборки.
Проверьте куда уходит запрос для *bundle.js* сейчас и убедитесь, что путь верен. Убедитесь, что в случае неправильного адреса показывается компонент ``
[Альтернативное мнение](http://jamesknelson.com/push-state-vs-hash-based-routing-with-react-js/) James K Nelson'a: не нужно использовать pushState (а следовательно browserHistory).
*P.S. James* [*предлагает*](http://jamesknelson.com/routing-with-raw-react/) *вообще не использовать react-router, но нам же нужно что-то разбирать в этом туториале ;)*
**Итого**: *browserHistory* требует большей поддержки на сервере, но url-адрес выглядит симпатичнее.
[Исходный код](https://github.com/maxfarseer/react-router-ru-tutorial/tree/browserHistory_vs_hashHistory) на данный момент.