React router - 更新URL哈希而不重新呈现页面

Question

使用react-router我正在寻找一种方法来更新页面URL /哈希，而不需要路由器重新呈现整个页面。

我正在开发一个完整的页面轮播，并希望每张幻灯片都有自己的URL（允许用户刷新页面并返回正确的幻灯片）。转盘稍后会滑动类似于this demo，这意味着下一个幻灯片已预先呈现。

可以使用我的轮播的精简版here。

当前的幻灯片更改如下所示：

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

这很好，没有URL更新。我真正想要的是：

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

这将设置当前幻灯片的道具，允许轮播动画。但是，现在使用此方法会导致页面重新渲染，并且不会显示任何动画。

我已经看到用于路由转换的ReactCSSTransitionGroup，但这似乎是为了渲染一个新页面并转换出旧页面。

如果已经有办法实现我所寻找的目标，并且我错过了它，那么有人可以指出我正确的方向吗？

Answer 1

1.0

react-router不再在您的路由上设置密钥。如果确实需要从路由处理程序设置密钥，请将其放在周围的元素上。

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

0.13

它现在是<ReactRouter.RouteHandler key="anything" />，但由于react-router的变化，这也不再需要了。有关详细信息，请参阅更改日志。

0.12

目前，react-router根据当前路由在您的处理程序上设置一个键。当反应发挥作用，并注意到一个不同的键时，它会抛出虚拟和真实dom中的整个子树，然后重新渲染。

为防止这种情况，您可以在使用activeRouteHandler（）时覆盖react-router的密钥

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

Answer 2

使用react-router是一件痛苦的事，因为它涉及破坏每个主要和次要版本的变化

React Router v2.0 rc5

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

Answer 3

对于反应路由器v4 ，您需要使用history并将其作为道具传递给Router。 Router然后将history对象作为道具传递给您的组件，您可以像这样使用它：

// In your component

this.props.history.push("#testing")

历史文件

// history.js 
import createHistory from "history/createBrowserHistory";

export default createHistory();

然后，无论您在哪里声明路由器，都要通过历史记录道具

import history from "./history";
import { Router } from "react-router-dom";

    <Router history={history}>
      // ... Your component
    </Router>