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 は状態を復元しません。
##設計
実装
このプロジェクトでは、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 }); }); } } };
componentWillUnmount() { const { dispatch } = this.props; const { activeKey } = this.state; dispatch({ type: "projectInfo/setProjectInfoPage", payload: { activeKey } }); }
state = { activeKey: pathToRegexp(PagePath.B).exec(pathName.last) ? activeKey : "" };
その他の解決策
ページ A がページ B によって返されるかどうかを判断します。ページ B が返されたときに状態を追加します。history.push({ pathname: path, state: {from } }); でAページに入り、状態に応じてBページから戻るかどうかを判断します。しかし、B に複数の入り口がある場合、戻るときにページのソースを知る必要があり、そうでないと戻ることができず、ロジックが少し複雑になり、エラーが発生しやすくなります。概要
この記事では、ページに複数の入り口と出口がある状況に適した、最後の状態を保持するページリターンのソリューションを提案します。このソリューションでは、履歴の変更を監視し、最後のページ アドレスを記録する方法を使用して、状態を復元するかどうかの基準を提供します。 推奨される学習: 「react ビデオ チュートリアル 」
以上が反応ジャンプ前のページステータスを記憶する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。