13

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

谢谢！

4

7 回答 7

15

这与你在没有 React.js 的情况下处理历史的方式并没有太大的不同。对我有用的是：我有一个顶级组件，它将应用程序的状态保存在this.state. 我正在使用Backbone 的 router，因此当我从路由器获取事件（以某种方式加载或更改 URL）时，我调用setState以更新顶级组件的状态。当我自己更新状态时，我确保还调用路由器的导航方法来更新 URL。似乎工作得很好：您可以在https://github.com/mjm/eats看到我的小应用程序中的一个示例。

于 2014-01-18T07:02:26.470 回答
6

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

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

于 2014-04-16T16:04:53.920 回答
3

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

Flatiron Director是一个路由器，因此您将有一个如何在 React 中使用它的示例。

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

于 2014-01-25T15:12:54.660 回答
1

一般来说，当涉及到客户端路由处理时，只要您的 URL 总是导致一种应用程序状态并且只有一种状态只有后退和前进按钮可以正常工作，那么在您的应用程序中如何到达某个 URL并不重要/状态。

因此，如果您的应用程序中的状态（不是 React setState-state，只是您的应用程序可以处于的任何状态）总是通过唯一的 URL 反映出来，那么您就一切就绪。

于 2014-01-14T16:54:07.077 回答
1

我编写了一个 React mixin，用于使用history.js将 React 组件的内部状态推送到浏览器的历史记录中。

基本思想是：

  1. 注册 React 组件以在页面加载时从浏览器历史记录中接收数据。这是用bindToBrowserHistory.
  2. saveState在 React 组件中您希望保存浏览器历史状态的任何位置调用。
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 的更多细节。

于 2014-05-20T15:20:56.230 回答
1

请记住，EmberJS 在路由方面做得很好。这个 react-nested-router 借鉴了该技术，可能会对您有所帮助。https://github.com/rpflorence/react-nested-router

于 2014-07-11T01:30:37.193 回答
0

React Router对我来说非常好用。超级简单易用，如果你需要的话，还有大量的花里胡哨。

于 2015-02-02T23:39:29.217 回答