Discussion on: 🔐 Private Route in React Router v6

View post

Replies for: I can't understand what is 'children' and what it return ? function PrivateRoute({ children }) { const auth = useAuth(); return auth ? childre...

In example bellow children inside PrivateRoute equals <Private />

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

Rakeshmokariya • Jan 25 '22

Ok i understood.Thank you so much.

Hasan Habib • Feb 6 '22

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

Andrei Luca • Feb 6 '22 • Edited

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>
  );
}