Реагирует с историей

Ответ 1

Это не слишком отличается от того, как вы будете обрабатывать историю без React.js. Что для меня хорошо работает, так это: у меня есть компонент верхнего уровня, который содержит состояние приложения в this.state. Я использую Backbone-маршрутизатор, поэтому, когда я получаю событие от маршрутизатора (URL-адрес был загружен или изменен каким-то образом), я вызываю setState для обновления состояния компонента верхнего уровня. Когда я сам обновляю состояние, я также должен вызвать метод навигации маршрутизатора для обновления URL-адреса. Кажется, он работает очень хорошо: вы можете увидеть пример из моего маленького приложения в https://github.com/mjm/eats.

Ответ 2

Другой вариант с React - использовать компонент React router. Он обрабатывает pushState для вас, и вы можете динамически изменять доступные маршруты по мере необходимости. Он работает с той же методологией, что и "Реакт", так как это сам класс реагирования. Проверьте это:

https://www.npmjs.org/package/react-router-component

Ответ 3

В дистрибутиве React есть папка с примерами, одна из которых является директором TodoMVC +.

Flatiron Director - это маршрутизатор, поэтому у вас будет пример того, как его использовать в React.

Обратите внимание, что Instagram в настоящее время использует Backbone-маршрутизатор, но они планируют использовать Director (в основном потому, что они могут использовать один и тот же маршрутизатор на стороне клиента и на стороне сервера, и им не нужна магистральная сеть, кроме маршрутизатора).

Ответ 4

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

Итак, если состояния вашего приложения (а не состояние React setState, независимо от того, в каком состоянии находится ваше приложение), всегда отражается с уникальным URL-адресом, тогда вы все настроены.

Ответ 5

I написал React mixin для использования history.js для перевода внутреннего состояния компонента React в историю браузера.

Основная идея заключается в следующем:

• Зарегистрируйте компонент React для получения данных из истории браузера при загрузке страницы. Это делается с помощью bindToBrowserHistory.
• Вызовите saveState в любой точке компонента React, где вы хотите сохранить состояние истории браузера.

var SimpleCategoryView = React.createClass({
  mixins: [HistoryJSMixin],
  getInitialState: function() {
    return { current_category: 0 }
  },
  handleCategoryChange: function(e) {
    this.setState({current_category: e.target.value});
    this.saveState();
  },
  componentDidMount: function() {
    this.bindToBrowserHistory();
  },
});

В этом примере я использую handleCategoryChange для обработки, когда пользователь нажимает кнопку для изменения категории, когда это происходит, я хочу запомнить текущее состояние компонента React.

Я написал более подробно об этом mixin здесь.

Ответ 6

Помните, что EmberJS проделал большую работу по маршрутизации. Этот реакционно-вложенный маршрутизатор заимствовал технику и может помочь вам. https://github.com/rpflorence/react-nested-router

Ответ 7

React Router отлично поработал у меня. Супер прост в использовании, с тоннами колоколов и свистов, если они вам нужны.