Reactjs 反应路由器-更新URL哈希而不重新呈现页面

我正在寻找一种更新页面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});
}

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

我见过用于路由转换的

reactcstrasitiongroup

，不过这似乎是为了呈现新页面和转换旧页面

如果已经有一种方法可以实现我所追求的目标，而我却错过了，有人能给我指出正确的方向吗？

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

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

---

使用react router是一件痛苦的事情，因为它涉及到在每个主要和次要版本中破坏更改

React路由器v2.0 rc5

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

---

对于React router v4，您需要使用

历史记录

，并将其作为道具传递给

路由器

<代码>路由器然后将

历史

对象作为道具传递给您的组件，您可以像这样使用它：

// 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>

从“/history”导入历史记录；
从“react Router dom”导入{Router}；
// ... 您的组件

尝试将处理程序中的

this.props.activeRouteHandler（）更改为
this.props.activeRouteHandler（{key:“test”}）
。这有用吗？虽然我不知道为什么，但它起作用了！我不得不将此与
组件willreceiveprops
结合起来，以获取更新的道具并调用
setState
，但仍然非常棒！想不想把这个作为我可以接受的答案？这只是一种预感，我没有时间去测试。下面的答案：-）查看我在底部关于
react router v4
@fakerainbrig的答案，从变更日志来看，现在不清楚如何在react router vs 1.0.0中使用新的历史模块实现这一点。您是否有可能更新此内容或为我指出正确的方向？@Kousha，
hashHistory
用于在
之后的URL上设置的路径
browserHistory
用于非散列URL，就像您的起始示例一样。V4.0有什么方法吗？或者更高查看我的V4答案您知道如何在v5中实现这一点吗？我在控制台中看到这样的信息：“警告：请使用
require（“history”）.createBrowserHistory
而不是
require（“history/createBrowserHistory”）
。对后者的支持将在下一个主要版本中删除。”我尝试了这个建议，但它破坏了网站。在v5中，修改历史记录也将重新提交页面。
import history from "./history";
import { Router } from "react-router-dom";

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