BrowserHistory vs HashHistory

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

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

BrowserHistory vs HashHistory

(глава для расширения кругозора)

До текущего времени мы использовали browserHistory (смотри src/index.js).

Можно использовать и hashHistory. Замените в src/index.js все вхождения browserHistory на hashHistory, откройте снова localhost:3000, видите в адресе #? Покликайте по ссылкам.

"Мусор" в адресе используется так сказать, для того чтобы приблизиться к нативному поведению браузера. Что-то вроде уникального ключа. (дословно здесь (EN)).

Спрашивается, зачем нам hashHistory ? Ответ простой - если использовать hashHistory, придется меньше телодвижений делать для настройки роутинга на сервере. Давайте вернемся к browserHistory, а так же добавим компонент <NotFound />.

src/components/NotFound.js

import React, { Component } from 'react'
import { Link } from 'react-router'

export default class NotFound extends Component {
  render() {
    return (
      <div className='container'>
        <div className='row'>
          <div className='col-md-12'>
            Страница не найдена. Вернуться на <Link to='/'>главную</Link>?
          </div>
        </div>
      </div>
    )
  }
}

Добавим <NotFound /> в список роутов:

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(
  <Router history={browserHistory}>
    <Route path='/' component={App}>
      <IndexRoute component={Home} />
      <Route path='admin' component={Admin} />
      <Route path='genre' component={Genre} />
    </Route>
    {/* для всех остальных роутов: показывай NotFound */}
    <Route path='*' component={NotFound} />
  </Router>,
  document.getElementById('root')
)

Попробуйте открыть http://localhost:3000/genrepewpewpew

А теперь - http://localhost:3000/genrepewpewpew/anotherpage

Почему? Зайдите на вкладку Network и проверьте, что отдает сервер внутри bundle.js

Корректный bundle.js для http://localhost:3000/genrepewpewpew

Некорректный bundle.js для http://localhost:3000/genrepewpewpew/anotherpage

Как думаете, в чем проблема?

Ответ кроется во фразе: "нам придется меньше телодвижений делать для настройки роутинга на сервере". Посмотрите сами

server.js

app.get(/.*/, function root(req, res) {
  res.sendFile(__dirname + '/index.html');
});

Переведем написанное: на все запросы отдавай index.html. Код index.html предельно прост:

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>React Router [RU]Tutorial</title>
  </head>
  <body>
    <div id="root">
    </div>

    <script src="dist/bundle.js"></script>
  </body>
</html>

Тем не менее, здесь допущена ошибка! Используется относительный путь для файла bundle.js, снова посмотрим в консоль хрома:

К счастью, такую ошибку легко исправить, и мы по прежнему можем лицезреть красивый вид адресов, используя browserHistory.

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>React Router [RU]Tutorial</title>
  </head>
  <body>
    <div id="root">
    </div>
    <!-- добавим / в пути к bundle.js -->
    <script src="/dist/bundle.js"></script>
  </body>
</html>

Не забудьте перезапустить webpack, так как index.html не находится под наблюдением для пересборки.

Проверьте куда уходит запрос для bundle.js сейчас и убедитесь, что путь верен. Убедитесь, что в случае неправильного адреса показывается компонент <NotFound />

Альтернативное мнение James K Nelson'a: не нужно использовать pushState (а следовательно browserHistory).

P.S. James предлагает вообще не использовать react-router, но нам же нужно что-то разбирать в этом туториале ;)

Итого: browserHistory требует большей поддержки на сервере, но url-адрес выглядит симпатичнее.

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

PreviousПодключаем react-router NextДописываем роуты

Last updated 4 years ago