react-router-dom version6 부터 useHistory가 제공되지 않는다.
개발을 하면서 직전에 방문한 url에 대한 history를 알아야 하는 상황이 존재해서
이 부분을 어떻게 처리해야하나 고민이 있었다.
예를 들어 로그인 페이지의 경우, 사용자가 직접 로그인 버튼을 눌러 페이지에 접근하는 경우도 있겠지만
로그인을 하지 않은 상태에서 상품상세페이지에 진입해 회원만 클릭할 수 있는 찜 버튼을 눌러 자동으로 로그인 페이지로 리턴되는 경우,
리프레시 토큰이 만료되어 자동으로 로그인 페이지로 리턴된 경우,
휴면상태해제를 위해 휴대폰본인인증(외부 모듈)을 완료한 후 로그인 페이지로 리턴되는 경우,
sns에서 공유된 링크를 통해 접속한 경우 등 여러가지 상황이 존재하는데
일률적으로 navigate(-1)을 사용하다보면, 적절하지 않은 페이지로 접근하거나 자사 페이지에서 벗어나게 되는 경우가 발생한다.
현재 프로젝트에서 redux-toolkit
을 사용해 Client State Management를 하고 있어서,
이를 사용해 직전에 방문한 url과 현재 방문한 url의 주소를 남기도록 만들었다.
//userSlice.js
import { createSlice } from "@reduxjs/toolkit";
const initialState = {
isLoggedIn: false,
userId: null,
navigationPath: {
to: "",
from: "",
},
};
const userSlice = createSlice({
name: "user",
initialState,
reducers: {
logIn(state, action) {
state.isLoggedIn = true;
state.userId = action.payload;
},
logOut(state) {
state.isLoggedIn = false;
},
updateNavigationPath(state, action) {
state.navigationPath = action.payload;
},
resetNavigationPath(state) {
state.navigationPath = {
to: "",
from: "",
};
},
},
extraReducers: {},
});
export default userSlice;
export const { logOut, logIn, updateNavigationPath, resetNavigationPath } = userSlice.actions;
//index.tsx
function GeneralFC(){
const { pathname } = useLocation()
const dispatch = useDispatch();
const navigationPath = useSelector(
(state) => state.user.navigationPath
);
useEffect(() => {
dispatch(updateNavigationPath({ from: navigationPath?.to, to: pathname }));
}, [pathname, dispatch]);
return null;
}
...