React router - обновить хэш URL-адресов без страницы повторной рендеринга

Использование react-router Я ищу способ обновления URL-адреса страницы/хэша без повторной рендеринга маршрутизатора всей страницы.

Я разрабатываю полноразмерную карусель и хочу, чтобы у каждого слайда был свой собственный URL (позволяющий пользователю обновлять страницу и возвращаться к правильному слайду). Карусель позже проделает аналогичную эту демонстрацию, что означает, что следующий слайд предварительно визуализируется.

Урезанная версия моей карусели доступна здесь.

Текущее изменение слайда выглядит следующим образом:

onClickLeft: function() {
  this.setState({
    selected: this.state.selected - 1
  });
}

Это работает отлично, без обновлений URL. Я действительно хочу:

mixin: [Navigation],
onClickLeft: function() {
  this.transitionTo('carousel-slide', {num: this.state.selected + 1});
}

Это установит опору текущего слайда, позволяя карусели анимироваться. Однако использование этого метода теперь приводит к повторной визуализации страницы, и анимация не отображается.

Я видел ReactCSSTransitionGroup, используемый для переходов маршрута, однако это, похоже, предназначено для создания новой страницы и перехода из старой.

Если у вас уже есть способ достичь того, что я ищу, и я пропустил его, мог бы кто-нибудь указать мне в правильном направлении?

Ответ 1

1.0

response-router больше не устанавливает ключ на ваших маршрутах. Если вам нужно установить ключ из обработчика маршрута, поместите его на окружающий элемент.

return (
  <div key={this.props.params.bookId}>
    {this.props.children}
  </div>
);

0.13

Теперь это <ReactRouter.RouteHandler key="anything" />, но это также больше не нужно из-за изменений в маршрутизаторе реакции. Подробнее см. В списке изменений.

0.12

В настоящее время agent-router устанавливает ключ на вашем обработчике на основе текущего маршрута. Когда он реагирует на свой diff и замечает другой ключ, он выкидывает все поддерево как в виртуальном, так и в реальном dom и rerenders.

Чтобы предотвратить это, вы можете переопределить ключ-ретранслятор при использовании activeRouteHandler()

this.props.activeRouteHandler({key: "anything"})

Ответ 2

Боль в работе с реагирующим маршрутизатором, потому что это связано с нарушением изменений в каждом крупном и младшем выпуске

React Router v2.0 rc5

import { hashHistory } from 'react-router'
this.props.location.query.t = key;
hashHistory.replace(this.props.location);