react-router-dom(v6) 함수 실행 시 이전 페이지로 이동

내가 찾아본건 다음과 같다.

 

버튼을 클릭시 이전 페이지로 이동하는 것

react-router-dom의 useNavigate를 사용하여 navigate안에 인덱스 -1을 입력하면 뒤로가기 기능이 구현된다.

 

그래서 현재 진행중인 프로젝트에 사용해 봤다.

내가 진행중인 프로젝트는 어떤 함수를 실행하고 그 함수가 완료되었을 때 이전페이지로 이동 하도록 했다.

 

PointCharge.tsx

callback이라는 함수가 실행되고 결제가 완료되면(success) navigate(-1)를 사용하여 이전페이지로 이동하도록 했다.

안된다.

여기서 navigate(-1)을 사용하는건 뒤로가기 버튼에만 사용해야된다는 걸 알았다.

그래서 다른 방법을 생각해야 되는데 다른 방법을 한 3일은 고민한거 같다.

글을 작성하면서 느끼는 거지만 이걸 왜 3일을 고민했지,,,

 

방법은 다음과 같다.

navigate의 state값에 이전 주소를 넘겨준다.

 

MyPage.tsx

<S.PointCharging onClick={()=>navigate('/mypage/point-charge',{state:{prevPage:'/mypage'}})}>충전하기</S.PointCharging>

이동하려는 주소와 state값에 현재 주소를 입력해준다.

이후 이동한 페이지에서 useLocation을 사용하여 state값을 받고

 

PointCharge.tsx

navigate안에 넣어준다.

 

 

<button onClick={() => navigate('/mypage/point-charge', { state: { prevPage: `/group-buy/${id!}/order` } })}>충전하러 가기</button>

혹시라도 이전페이지의 주소에 위와같이 변수id값이 들어간다면 id값을 반드시 useParams를 사용하여 받아와야한다.

navigate의 state값으로 id데이터를 전달하여 useLotation을 사용하면 id값을 사용한다면  함수 실행 후에 이전페이지로 이동하면 데이터가 다 날아간다.

 

더 좋은 방법이 있다면 알려주시길,,,,