접근 제한 라우팅 구현

1. PrivateRouter, PublicRouter 를 이용한 구현 

- PrivateRouter, PublicRouter 

function PrivateLoginRoute({ children }) {
  return isLogin() ? children : <Navigate to="/login" />;
}

function PublicRoute({ children }) {
  return isLogin() ? <Navigate to="/main" /> : children;
}

- index.jsx 

<BrowserRouter>
    <Reset />
    <Routes>
      <Route path="/" element={<IndexPage />} />
      <Route path="/login" element={<LoginPage />} />
      <Route path="/main" element={<MainPage />} />
      <Route
        path="/"
        element={
          <PublicRoute>
            <IndexPage />
          </PublicRoute>
        }
      />
      <Route
        path="/login"
        element={
          <PublicRoute>
            <LoginPage />
          </PublicRoute>
        }
      />
      <Route
        path="/main"
        element={
          <PrivateIndexRoute>
            <MainPage />
          </PrivateIndexRoute>
        }
      />
      <Route path="/main/:search" element={<MainPage />} />
      <Route path="/mypage" element={<MyPage />} />
      <Route
        path="/mypage"
        element={
          <PrivateLoginRoute>
            <MyPage />
          </PrivateLoginRoute>
        }
      />
      <Route path="/parties/:id" element={<PartyPage />} />
      <Route path="/my-party" element={<MyPartyPage />} />
      <Route path="/chats/:id" element={<ChatPage />} />
      <Route path="/newparty" element={<NewPartyPage />} />
      <Route
        path="/my-party"
        element={
          <PrivateLoginRoute>
            <MyPartyPage />
          </PrivateLoginRoute>
        }
      />
      <Route
        path="/chats/:id"
        element={
          <PrivateLoginRoute>
            <ChatPage />
          </PrivateLoginRoute>
        }
      />
      <Route
        path="/newparty"
        element={
          <PrivateLoginRoute>
            <NewPartyPage />
          </PrivateLoginRoute>
        }
      />
      <Route path="/newparty/:id" element={<NewPartyPage />} />
    </Routes>
  </BrowserRouter>,

 

 

2. <Outlet /> 컴포넌트 사용한 구현

function FilterRoute({ filter, fallback }) {
  return filter ? <Outlet /> : <Navigate to={fallback} />;
}

 

ReactDOM.render(
  <BrowserRouter>
    <Reset />
    <Routes>
      <Route element={<FilterRoute filter={!isLogin()} fallback="/main" />}>
        <Route path="/" element={<IndexPage />} />
        <Route path="/login" element={<LoginPage />} />
      </Route>

      <Route element={<FilterRoute filter={isLogin()} fallback="/" />}>
        <Route path="/main" element={<MainPage />} />
      </Route>

      <Route element={<FilterRoute filter={isLogin()} fallback="/login" />}>
        <Route path="/" element={<IndexPage />} />
        <Route path="/mypage" element={<MyPage />} />
        <Route path="/my-party" element={<MyPartyPage />} />
        <Route path="/chats/:id" element={<ChatPage />} />
        <Route path="/newparty" element={<NewPartyPage />} />
      </Route>

      <Route path="/main/:search" element={<MainPage />} />
      <Route path="/parties/:id" element={<PartyPage />} />
      <Route path="/newparty/:id" element={<NewPartyPage />} />
    </Routes>
  </BrowserRouter>,
  document.getElementById('root'),
);

짱짱맨!