TIL 01.26

로그인 상태에 따라 달라지는 헤더를 만들었는데,
문제는 router안에 없어서 useNavigate()를 쓸 수 없다는 것이다.

---

시도한 것

1. router 안에 넣어보자

import Header from '../components/GlobalComponents/Header/Header';

const Router = () => {
  return (
    <BrowserRouter>
      <Header />
      <Routes>
        <Route path="/" element={<MainPage />} />
        {/* <Route path="/detail" element={<DetailPage />} /> */}
        <Route path="/detail/:videoId" element={<DetailVideo />} />
        <Route path="/login" element={<LoginPage />} />
        <Route path="/signUp" element={<SignUpPage />} />
        <Route path="/my" element={<MyPage />} />
      </Routes>
    </BrowserRouter>
  );
};
export default Router;

쓰로틀링 일어난다... 무섭

2. Link to 컴포넌트를 써보자

<LoginToggle>
        {user ? (
          <>
            <Nav>`${userNickName}님`</Nav>
            <Link to="my">마이페이지</Link>
            <Nav onClick={LogOutHandler}>로그아웃</Nav>
          </>
        ) : (
          <>
            <Link to="signUp">회원가입</Link>
            <Link to="login">로그인</Link>
          </>
        )}
      </LoginToggle>

아무 일도 일어나지 않는다... 무섭

해결

첫 번째 시도를 다시 해보았다.
전체 레이아웃에 헤더를 넣어주고, 라우트 같이 넣어주었더니 해결되었다.

const Layout = ({ children }: any) => {
 return (
   <LayOut>
     <Header />
     <div>{children}</div>
   </LayOut>
 );
};

const Router = () => {
 return (
   <BrowserRouter>
     <Layout>
       <Routes>
         <Route path="/" element={<MainPage />} />
         <Route path="/detail/:videoId" element={<DetailPage />} />
         <Route path="/login" element={<LoginPage />} />
         <Route path="/signUp" element={<SignUpPage />} />
         <Route path="/my" element={<MyPage />} />
       </Routes>
     </Layout>
   </BrowserRouter>
 );
};