reactjs – React路由器 – 更新URL哈希而不重新渲染页面

发布时间：2020-12-15 20:52:33 所属栏目：百科来源：网络整理

导读：使用 react-router我正在寻找一种更新页面URL /哈希的方法,而不需要重新渲染整个页面. 我正在开发一个全页转盘,并希望每个幻灯片拥有自己的URL(允许用户刷新页面并返回正确的幻灯片).轮盘后来会有类似于this demo的滑动,这意味着下一张幻灯片是预渲染的. 我

使用 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用于路由转换,但是这似乎是为了渲染一个新的页面和转换旧的页面.

如果已经有办法实现我正在寻找的东西,而且我错过了,有人可以指出我的方向吗？

1.0

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

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

0.13

现在是< ReactRouter.RouteHandler key =“任何东西”/>但是由于反应路由器的变化,这也不再是真正需要的.有关更多信息,请参阅更改日志.

0.12

目前,反应路由器根据当前路由在您的处理程序中设置一个密钥.当反应做它的差异,并注意到一个不同的关键,??它抛出整个子树在虚拟和真实的dom,并重新运行.

为了防止这种情况,您可以在使用activeRouteHandler()时覆盖反应路由器的密钥

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!