javascript - 歴史のあるReactjs

Question

ブラウザの戻るボタンと進むボタンが直感的に機能するように、reactjsで履歴を処理しようとしています。これの例、または従うべき一般的なガイドラインはありますか?

ありがとう！

Answer 1

React のもう 1 つのオプションは、React ルーター コンポーネントを使用することです。pushState を処理し、必要に応じて利用可能なルートを動的に変更できます。それ自体が反応クラスであるため、React と同じ方法論で動作します。でそれをチェックしてください：

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

Answer 2

history.jsを使用して React コンポーネントの内部状態をブラウザーの履歴にプッシュするための React mixinを作成しました。

基本的な考え方は次のとおりです。

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 については、こちらで詳しく説明しています。

Answer 3

一般に、クライアント側のルート処理に関しては、URL が常に 1 つのアプリケーション状態につながり、1 つの状態につながる限り、戻るボタンと進むボタンだけが正常に機能する限り、特定の URL に到達する方法はアプリケーションでは問題になりません。 /州。

したがって、アプリの状態 (React の setState-state ではなく、アプリの状態が何であれ) が常に一意の URL に反映されている場合、準備は完了です。

Answer 4

React Routerは私にとって非常にうまく機能しました。必要に応じて、たくさんのベルとホイッスルを使用して、非常に簡単に使用できます。