React路由器-更新URL散列而不重新呈现页面
React路由器-更新URL散列而不重新呈现页面
提问于 2014-10-07 23:03:42
使用react-router，我正在寻找一种方法来更新页面的URL / hash，而不需要路由器重新渲染整个页面。
我正在开发一个完整的页面旋转木马，并希望每张幻灯片有它自己的网址(允许用户刷新页面，并返回到正确的幻灯片)。旋转木马稍后将有类似于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
Stack Overflow用户
回答已采纳
发布于 2014-10-08 02:32:13
1.0
react-router不再在您的路由上设置密钥。如果您确实需要从路由处理程序设置键，请将其放在周围的元素上。
return (
<div key={this.props.params.bookId}>
{this.props.children}
</div>
);0.13
它现在是<ReactRouter.RouteHandler key="anything" />，但由于react-router的变化，也不再真正需要它。有关详细信息，请参阅changelog。
0.12
目前，react-router会根据当前路由在处理程序上设置一个密钥。当react执行它的diff，并注意到一个不同的键时，它抛出虚拟和真实dom中的整个子树，并重新呈现。
为了防止出现这种情况，您可以在使用activeRouteHandler()时覆盖react-router的键
this.props.activeRouteHandler({key: "anything"})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26239154
复制相关文章
相似问题