반응 점프 전 페이지 상태를 기억하는 방법

React는 점프하기 전에 페이지 상태를 기억하는 방법을 구현합니다. 1. 경로 변경을 모니터링하고 경로가 변경되면 lastPath 및 currentPath를 redux 저장소로 업데이트합니다. 2. 페이지 A를 떠날 때 페이지 상태를 redux 저장소에 저장합니다. 3. Redux Store의 lastPath가 페이지 B의 경로와 동일하면 A는 B에 의해 복원된 상태로 복귀된 것으로 간주되며, 그렇지 않으면 복원되지 않습니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 18.0.0, Dell G3 컴퓨터.

React로 이동하기 전에 페이지 상태를 기억하는 방법은 무엇입니까?

React 페이지는 마지막 상태를 유지하기 위해 돌아갑니다.

Requirements

• 페이지 A는 페이지 B로 이동한 다음 페이지 A로 돌아갑니다. 페이지 A는 떠나기 전에 상태를 복원해야 합니다. A와 B 페이지에는 여러 개의 입구가 있습니다. 다른 페이지에서 A 페이지로 이동하면 A 페이지는 상태를 복원하지 않습니다.

• Design

경로 변경을 모니터링하고 경로가 변경되면 lastPath 및 currentPath를 redux 저장소로 업데이트합니다.

• 페이지 A를 떠날 때 페이지 상태를 redux 저장소에 저장합니다. 페이지 A에 진입할 때, redux store의 lastPath가 페이지 B의 경로와 같다면 A는 B에 의해 복원된 상태로 복귀된 것으로 간주되고, 그렇지 않으면 복원되지 않는다.

• Implementation

• 이 프로젝트는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!