Discussion on: 🔐 Private Route in React Router v6

[Hasan Habib]

Could you please share multiple private route example. What your suggestion to keep the code looks clean?
Thank you.

[Andrei Luca]

Hey Hasan!

You can put them as adjacent routes

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route
          path="/private-2"
          element={
            <PrivateRoute>
              <Private1 />
            </PrivateRoute>
          }
        />
        <Route
          path="/private-2"
          element={
            <PrivateRoute>
              <Private2 />
            </PrivateRoute>
          }
        />
      </Routes>
    </BrowserRouter>
  );
}

or you can put all private routes in a single parent component that is private

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route
          path="/all-private"
          element={
            <PrivateRoute>
              <AllPrivate />
            </PrivateRoute>
          }
        />
      </Routes>
    </BrowserRouter>
  );
}