使用
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
原文链接:https://www.f2er.com/react/301207.html反应路由器不再在您的路由上设置密钥.如果您确实需要从路由处理程序设置密钥,请将其放在周围的元素上.
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"})