React 路由器 - 无需重新渲染页面即可更新 URL 哈希 [英] React router - Update URL hash without re-rendering page

问题描述

使用 react-router 我正在寻找一种更新页面 URL/哈希的方法, 无需路由器重新渲染整个页面.

我正在开发一个整页轮播，并希望每张幻灯片都有自己的 URL(允许用户刷新页面并返回到正确的幻灯片).轮播稍后将有类似于这个演示的滑动，这意味着下一个幻灯片已预渲染.

可以在此处获得我的轮播的精简版.

当前的幻灯片更改如下所示:

onClickLeft: function() {this.setState({选择:this.state.selected - 1});}

这很好用，没有 URL 更新.我真正想要的是:

mixin: [导航],onClickLeft:函数(){this.transitionTo('carousel-slide', {num: this.state.selected + 1});}

这将设置当前幻灯片的道具，允许轮播动画.但是，现在使用此方法会导致页面重新呈现且不显示动画.

我已经看到 ReactCSSTransitionGroup 用于路由转换，但这似乎是为了渲染新页面并转换旧页面.

如果已经有一种方法可以实现我正在寻找的东西，而我却错过了，那么有人能指出我正确的方向吗?

解决方案

1.0

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

返回 (<div key={this.props.params.bookId}>{this.props.children}

);

0.13

现在是 <ReactRouter.RouteHandler key="anything"/>，但由于 react-router 的变化，这也不再真正需要.有关更多详细信息，请参阅变更日志.

0.12

目前，react-router 根据当前路由在处理程序上设置一个键.当 react 进行 diff 并注意到不同的键时，它会抛出虚拟和真实 dom 中的整个子树，并重新渲染.

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

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

Using react-router I'm looking for a way to update the page URL / hash, without the router re-rendering the whole page.

I am developing a full page carousel, and would like each slide to have it's own URL (allowing the user to refresh the page and return to the correct slide). The carousel will later have swipe similar to this demo, which means the next slide is pre-rendered.

A stripped down version of my carousel is available here.

The current slide change looks like this:

onClickLeft: function() {
  this.setState({
    selected: this.state.selected - 1
  });
}

This works fine, with no URL updates. What I really want is:

mixin: [Navigation],
onClickLeft: function() {
  this.transitionTo('carousel-slide', {num: this.state.selected + 1});
}

This would set the prop of the current slide, allowing the carousel to animate. However using this method now causes the page to re-render and no animation is displayed.

I have seen the ReactCSSTransitionGroup used for route transitions, however this seems geared toward rendering a new page and transitioning out the old one.

If there's already a way to achieve what I'm looking for, and I've missed it, could someone point me in the right direction?

解决方案

1.0

react-router no longer sets a key on your routes. If you do need to set a key from a route handler, put it on a surrounding element.

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

0.13

It's now <ReactRouter.RouteHandler key="anything" />, but this is also no longer really needed due to changes in react-router. See the changelog for more details.

0.12

Currently, react-router sets a key on your handler based on the current route. When react does its diff, and notices a different key, it throws out the entire subtree both in virtual and real dom, and rerenders.

To prevent this, you can override react-router's key when using activeRouteHandler()

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

这篇关于React 路由器 - 无需重新渲染页面即可更新 URL 哈希的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！