我正在使用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用于路线转换的,但是这似乎是为了呈现新页面并过渡到旧页面。
ReactCSSTransitionGroup
如果已经有一种方法可以实现我所寻找的目标,而我却错过了,有人可以指出我正确的方向吗?
react-router不再在您的路线上设置密钥。如果确实需要从路由处理程序设置键,请将其放在周围的元素上。
return ( <div key={this.props.params.bookId}> {this.props.children} </div> );
现在<ReactRouter.RouteHandler key="anything" />,但是由于react- router的更改,也不再真正需要此功能。请参阅更改日志以获取更多详细信息。
<ReactRouter.RouteHandler key="anything" />
当前,react- router根据当前路由在您的处理程序上设置密钥。当react进行比较时,如果发现一个不同的密钥,它将以虚拟和真实dom丢弃整个子树,然后重新渲染。
为了防止这种情况,您可以在使用activeRouteHandler()时覆盖react-router的键
this.props.activeRouteHandler({key: "anything"})