Do it! 클론 코딩 트위터 (4)

4-6 내비게이션 추가하고 로그아웃 처리하기 

-> 사이트를 이리저리 옮길 수 있게 하기 위한 내비게이션 

 

default 는 Home 으로 연결됌. 

My profile을 누르면 profile로 연결됌.

 

<Profile.js에 로그아웃 버튼 만들기>

Profile.js

signOut함수가 실행되면 IndexDB에 있는 정보를 알아서 비우고, 로그아웃까지 처리해줌. 

로그아웃을 했음에도 주소 표시줄은 여전히 /profile임.

⬇️

고쳐보자 !

 

< Redirect를 사용하여 로그아웃 후 주소 이동하기 >

Router.js

isLoggedIn  상태를 보고 두 Route로 분기

로그아웃 처리가 끝난 상태면 isLoggedIn은 false. 

But false로 분기가 되더라도 exact path "/"는 정확하게 주소가 "/"인 경우에만 해당함. 

( <로그아웃> 버튼을 누른 다음의 주소는 "profile"이므로 동작해야하는 Route도 무시됨 따라서 Redirect가 동작함. )

 

<useNavigate로 로그아웃 후 주소 이동하기> = useHistory에서 useNavigate로 바뀜. 

= 라우터가 아니라 useNavigate를 이용해서 자바스트립트로 리다이렉트를 시킴. 

"/"로 바로 이동시킴. 

 

🟢주소 이동

0️⃣. Redirect 사용 

1️⃣. useNavigate 사용