-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
SSR적용했을때 router.replace 한박자 늦게돼서 오류
21.07.27 12:32 작성 조회수 280
0
아래는 프로필페이지 ssr적용한 코드입니다.
const ProfilePage = () => {
const dispatch = useDispatch();
const {loadedProfile} = useSelector(state=>state.user);
useEffect(()=>{
dispatch(indexSlice.actions.changeMenu('user'));
},[])
return(
<div>
<Header currentLocate="user"/>
<ProfileLayout profileUser={loadedProfile} />
</div>
)
}
export const getServerSideProps = wrapper.getServerSideProps((store)=>async({req,params})=>{
const cookie = req ? req.headers.cookie : '';
axios.defaults.headers.Cookie = '';
if(req && cookie){
axios.defaults.headers.Cookie = cookie;
}
await store.dispatch(loadUser());
await store.dispatch(loadProfile(params.profile));
})
export default ProfilePage;
loadProfile()은 프로필정보 받아오는 액션입니다.
로그아웃시에는 loadUser.rejected 로 me도 null,
loadProfile도 rejected 돼서 loadedProfile도 null이
되게 설정해놨습니다.
아래는 <Header /> 컴포넌트에 에 들어간 로그아웃함수입니다.
const onClickLogout = useCallback(()=>{
dispatch(logoutAction());
router.replace('/')
},[]);
여기서 문제가 ssr로 인해 화면을 만들어준뒤에 router가
실행되는것같아서 데이터가 필요한 코드에 에러가뜨며
"'~~~' 는 null에서 가져올수 없다" 같은 에러가 뜨며
url을 보면 '/'로 이동을 하긴했지만 에러화면이 떠있습니다.
그래서 데이터가 필요한 화면에서도 로그아웃을 누르면
에러화면없이 '/'로 이동하게하고싶은데 방법이 없을까요.
wrapper.getServerSideProps 함수에 router을 넣어보니
router는 오직 csr에서만 사용가능하다는 에러화면이뜹니다.
답변을 작성해보세요.
0
조현영
지식공유자2021.07.27
router.replace는 ssr이 아니라 csr입니다. 데이터가 없는 경우 에러가 나는 것이므로 데이터가 없을 때 화면도 만들어두시면 됩니다.
답변 1