反応ジャンプ前のページステータスを記憶する方法-フロントエンドQ&A-php.cn

反応ジャンプ前のページステータスを記憶する方法

藏色散人

リリース： 2023-01-06 14:31:10

オリジナル

2359 人が閲覧しました

React は、ジャンプする前にページのステータスを記憶するメソッドを実装します: 1. パスの変更を監視し、パスが変更されたときに lastPath と currentPath を redux ストアに更新します; 2. ページ A を離れるときに、ページのステータスを次の場所に保存します。 redux ストア内; 3. redux ストアの lastPath がページ B のパスと等しい場合、A は B によって復元された状態に戻されたとみなされ、そうでない場合は復元されません。

反応ジャンプ前のページステータスを記憶する方法

このチュートリアルの動作環境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。

反応する前にページのステータスを記憶するにはどうすればよいですか?

React ページは最後の状態を保持するために戻ります

要件

ページ A Jump ページ B に移動してから、ページ A に戻ります。ページ A は、終了する前に状態を復元する必要があります。
ページ A とページ B への入り口は複数あります。ページ A は状態を復元しません。

##設計

パスの変更をリッスンし、パスが変更されたときに lastPath と currentPath を redux ストアに更新します。
ページ A を離れるとき、ページのステータスを redux ストアに保存します。
ページ A に入るとき、redux ストアの lastPath が等しい場合は、ページ B のパスにアクセスした場合、A は B によって復元された状態に戻されたと見なされます。そうでない場合は復元されません。

実装

このプロジェクトでは、react-router dva ライブラリを使用しており、実装部分には関連テクノロジが含まれます。

パスの変更を監視し、履歴を通じてパスの変更を監視し、lastPath と currentPath を記録します。ここでは、DVA サブスクリプションは履歴をサブスクライブするために使用され、パスが変更されると、パス情報が状態に同期されます。

const model = {
  namespace: "global",
  state: {
    pathName: { last: "", current: "" },
  },
  reducers: {
    setPathName(state: any, { pathName }: any) {
      state.pathName.last = state.pathName.current;
      state.pathName.current = pathName;
    },
   
  effects: {
  },
  subscriptions: {
    setup({ history, dispatch }: any) {
      return history.listen(({ pathName }: any) => {
        dispatch({ type: "global/setPathName", pathName });
      });
    }
  }
};

ログイン後にコピー

ページがアンロードされるときにステータスを Redux ストアに同期します。たとえば:

componentWillUnmount() {
    const { dispatch } = this.props;
    const { activeKey } = this.state;
    dispatch({
      type: "projectInfo/setProjectInfoPage",
      payload: { activeKey }
    });
  }

ログイン後にコピー

ページがリロードされるとき。たとえば:

state = {
    activeKey: pathToRegexp(PagePath.B).exec(pathName.last) ? activeKey : ""
  };

ログイン後にコピー

pathToRegexp は、 path-to-regexp ライブラリ、使用されます。ルートマッチング。ここでは、前のページがページ B であるかどうかを判断するために使用されます。

その他の解決策

ページ A がページ B によって返されるかどうかを判断します。ページ B が返されたときに状態を追加します。history.push({ pathname: path, state: {from } }); でAページに入り、状態に応じてBページから戻るかどうかを判断します。しかし、B に複数の入り口がある場合、戻るときにページのソースを知る必要があり、そうでないと戻ることができず、ロジックが少し複雑になり、エラーが発生しやすくなります。

概要

この記事では、ページに複数の入り口と出口がある状況に適した、最後の状態を保持するページリターンのソリューションを提案します。このソリューションでは、履歴の変更を監視し、最後のページアドレスを記録する方法を使用して、状態を復元するかどうかの基準を提供します。

推奨される学習: 「

react ビデオチュートリアル」

以上が反応ジャンプ前のページステータスを記憶する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。