집 >웹 프론트엔드 >프런트엔드 Q&A >반응 점프 전 페이지 상태를 기억하는 방법

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

藏色散人원래의: 2023-01-06 13:59:022365검색

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 라이브러리를 사용하며 구현 부분에는 관련 기술이 포함됩니다.

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에 여러 항목이 있는 경우 반환할 때 페이지의 소스를 알아야 합니다. 그렇지 않으면 반환할 수 없으며 논리가 약간 복잡하고 오류가 발생하기 쉽습니다.

요약

이 글에서는 페이지에 여러 입구와 출구가 있는 상황에 적합한 마지막 상태를 유지하기 위한 페이지 반환 솔루션을 제안합니다. 이 솔루션은 이력 변경을 모니터링하고 마지막 페이지 주소를 기록하는 방식을 사용하여 상태 복원 여부에 대한 근거를 제공합니다.

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

관련 기사