小编典典

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

reactjs

我正在使用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用于路线转换的，但是这似乎是为了呈现新页面并过渡到旧页面。

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

阅读 437

2020-07-22

共1个答案

小编典典

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

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

现在<ReactRouter.RouteHandler key="anything" />，但是由于react-
router的更改，也不再真正需要此功能。请参阅更改日志以获取更多详细信息。

当前，react-
router根据当前路由在您的处理程序上设置密钥。当react进行比较时，如果发现一个不同的密钥，它将以虚拟和真实dom丢弃整个子树，然后重新渲染。

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

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

2020-07-22