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

Question

使用react-router我正在寻找一种更新页面URL/hash的方法,而不需要路由器重新呈现整个页面.

我正在开发一个完整的页面轮播,并希望每张幻灯片都有自己的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用于路由转换,但是这似乎是为了渲染一个新页面并转换出旧页面.

如果已经有办法实现我正在寻找的东西,而我却错过了,有人能指出我正确的方向吗？

Answer 1

1.0

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

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

0.13

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

0.12

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

为防止这种情况,您可以在使用activeRouteHandler()时覆盖react-router的密钥

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

Answer 2

使用react-router是一件痛苦的事,因为它涉及破坏每个主要版本和次要版本的变化

React Router v2.0 rc5

import { hashHistory } from 'react-router'
this.props.location.query.t = key;
hashHistory.replace(this.props.location);

Answer 3

对于React 路由器 v4，您需要使用history并将其作为道具传递给Router. Router然后将history对象作为道具传递给您的组件，您可以像这样使用它：

// In your component

this.props.history.push("#testing")

历史档案

// history.js 
import createHistory from "history/createBrowserHistory";

export default createHistory();

然后，无论你在哪里声明你的路由器，传递历史道具

import history from "./history";
import { Router } from "react-router-dom";

    <Router history={history}>
      // ... Your component
    </Router>