javascript 有历史的 Reactjs

Reactjs with history

提问by Heptic

I am trying to handle history with reactjs, in such a way that the browser back and forward buttons work intuitively. Is there any examples of this, or general guidelines I should be following?

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

Thanks!

谢谢！

回答by Matt Moriarity

It's not too much different than how you would handle history without React.js. What works well for me is this: I have a top-level component that holds the state of the app in this.state. I'm using Backbone's router, so when I get an event from the router (a URL was loaded or changed in some way), I call setStateto update the top-level component's state. When I update the state myself, I make sure to also call the router's navigate method to update the URL. Seems to work pretty well: you can see an example from my little app at https://github.com/mjm/eats.

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

回答by user3317868

Another option with React is to use the React router component. It handles pushState for you and you can dynamically change the available routes as needed. It works with the same methodology as React does, as it is a react class itself. Check it out at:

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

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

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

回答by Sebastien Lorber

In the React distribution there's an exemple folder with one being TodoMVC + Director.

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

Flatiron Directoris a router, so you'll have an exemple on how to use it in React.

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

Notice that Instagram is currently using Backbone router but they are planning to use Director (mostly because they can use the same router on client and server side and they don't need Backbone except the router)

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

回答by krs

In general when it comes to client side route handing, As long as your URL always leads to one application state and one state only the back and forward-buttons will work fine, it shouldn't matter in your application howyou reach a certain URL/State.

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

So if states in your app (not the React setState-state, just whatever state your app can be in) is always is reflected with a unique URL then you're all set.

因此，如果您的应用程序中的状态（不是 React setState-state，只是您的应用程序可以处于的任何状态）始终通过唯一的 URL 反映，那么您就大功告成了。

回答by leifdenby

I wrote a React mixinfor using history.jsto push the internal state of a React component to the browser's history.

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

The basic idea is to:

基本思想是：

1. Register the React component to receive data from the browser history on page load. This is done with bindToBrowserHistory.
2. Call saveStateat any point in the React component where you would like to save the state the the browser's history.

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();
  },
});

In this example I am using handleCategoryChangeto handle when the user clicks a button to change the category, when this happens I want to remember the current state of the React component.

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

I wrote in some more detail about this mixin here.

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

回答by Hao

Remember EmberJS has done a great work on routing. This react-nested-router has borrowed the technique from that and might help you out.https://github.com/rpflorence/react-nested-router

记住 EmberJS 在路由方面做了很棒的工作。这个 react-nested-router 借鉴了其中的技术，可能会帮助你。https://github.com/rpflorence/react-nested-router

回答by thealexbaron

React Routerhas worked really well for me. Super simple to use, with tons of bells and whistles if you need them.

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