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發行版中有一個exemple文件夾，其中一個是TodoMVC + Director。

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

請注意，Instagram目前正在使用Backbone路由器，但他們計划使用Director（主要是因為他們可以在客戶端和服務器端使用相同的路由器，除路由器外他們不需要Backbone）

Answer 4

一般來說，當涉及到客戶端路由處理時，只要您的URL始終指向一個應用程序狀態和一個狀態，只有后退和前進按鈕才能正常工作，在您的應用程序中如何到達某個URL無關緊要/州。

因此，如果您的應用中的狀態（不是React setState-state，只是您的應用可以處於的任何狀態）總是反映在一個唯一的URL中，那么您就已經完成了設置。

Answer 5

我編寫了一個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的更多細節。

Answer 6

記住EmberJS在路由方面做了很多工作。 這個反應嵌套路由器從中借用了這個技術，可能會幫助你。 https://github.com/rpflorence/react-nested-router

Answer 7

React Router對我來說非常好用。 超級簡單易用，如果你需要它們，還有大量的鈴聲和口哨聲。