[보드픽]리액트 라우터 연결 + 로그인 상태에 따른 페이지 이동

zzincode·2024년 5월 2일

스위프

목록 보기
2/11
post-thumbnail

로그인 상태에 따라 다른 페이지로 이동시키는 로직

1. "/onBoarding"페이지 방문 시

  • 로그인 됐을 경우, (isLoggedIn = true) "/"홈으로 이동
  • 로그인이 안됐을 경우, (isLoggedIn = false) "/onBoarding"페이지 렌더링

2. TabBar는 onBoarding 페이지에서만 표시되어야함

  • onBoarding페이지는 isLoggedIn = true일때만 렌더링되므로 TabBar도 동일
function App() {
  const isLoggedIn = true;

  return (
    <div className="App">
      <Routes>
        <Route
          path="/onBoarding"
          element={isLoggedIn ? <Navigate to="/" /> : <OnBoarding />}
        />
        <Route path="/" element={isLoggedIn ? <Home /> : <Navigate to="/onBoarding" />} />
        <Route path="/category" element={<Category />} />
        <Route path="/review" element={<Review />} />
        <Route path="/category/:id" element={<CategoryDetail />} />
        <Route path="/myPick" element={<MyPick />} />
        <Route path="/myPage" element={<MyPage />} />
      </Routes>
      {isLoggedIn && <TabBar />}
    </div>
  );
}

0개의 댓글