Reactjs与历史

Question

我正在尝试使用reactjs处理历史记录，以便浏览器的后退和前进按钮直观地工作。有没有这方面的例子，或者我应该遵循的一般指导原则？

谢谢！

Answer 1

与没有React.js处理历史记录的方式没有多大区别。对我来说效果很好的是：我有一个顶级组件，用于保存this.state中应用程序的状态。我正在使用 Backbone的路由器，因此当我从路由器获取事件（以某种方式加载或更改URL）时，我调用setState来更新顶级组件的状态。当我自己更新状态时，我确保也调用路由器的导航方法来更新URL。似乎工作得很好：你可以在我https://github.com/mjm/eats的小应用程序中看到一个例子。

Answer 2

React的另一个选择是使用React路由器组件。它为您处理pushState，您可以根据需要动态更改可用的路由。它使用与React相同的方法，因为它本身就是一个反应类。请查看：

https://www.npmjs.org/package/react-router-component

Answer 3

在React发行版中有一个例子文件夹，其中一个是TodoMVC + Director。

Flatiron Director是一个路由器，所以你将有一个关于如何在React中使用它的例子。

请注意，Instagram目前正在使用Backbone路由器，但他们计划使用Director（主要是因为他们可以在客户端和服务器端使用相同的路由器，除路由器外他们不需要Backbone）

Answer 4

一般来说，当涉及到客户端路由处理时，只要您的URL总是指向一个应用程序状态而一个状态只有后退和前进按钮才能正常工作，那么在您的应用程序中它应该无关紧要 如何到达某个网址/州。

因此，如果你的应用中的状态（不是React setState-state，只是你的应用所处的状态）总是会被一个唯一的URL反映出来，那么你就已经完成了设置。

Answer 5

我wrote a React mixin使用history.js将React组件的内部状态推送到浏览器的历史记录。

基本思路是：

1. 注册React组件以在页面加载时从浏览器历史记录接收数据。这是通过bindToBrowserHistory完成的。
2. 在React组件中的任何位置调用saveState，您希望将状态保存为浏览器的历史记录。

var SimpleCategoryView = React.createClass({
  mixins: [HistoryJSMixin],
  getInitialState: function() {
    return { current_category: 0 }
  },
  handleCategoryChange: function(e) {
    this.setState({current_category: e.target.value});
    this.saveState();
  },
  componentDidMount: function() {
    this.bindToBrowserHistory();
  },
});

在此示例中，我使用handleCategoryChange来处理用户单击按钮以更改类别的时间，当发生这种情况时，我想记住React组件的当前状态。

我写了一些关于这个mixin here的更多细节。

Answer 6

记住EmberJS在路由方面做得很好。这个反应嵌套路由器借用了这个技术，可能会帮助你。https://github.com/rpflorence/react-nested-router

Answer 7

React Router对我来说效果很好。超级简单易用，如果你需要，可以使用大量的铃声和口哨声。