🔐 Private Route in React Router v6

Every React app with a login has some version of a PrivateRoute. React Router v6 changes the building blocks that component was made of, so the old pattern doesn’t carry over as is. Let’s rebuild it for v6.

---

👉 Continue reading on my blog: 🔐 Private Route in React Router v6

Comments

[Kevin H Griffith]

Awesome man! Huge thanks 🙏

[Viney Rawat]

शानदार लेख भाई

[Minh Kì Đông]

Great

[Femi Obadimu]

thanks

[Yeee]

Awesome !

[Dhenyson Jhean]

Perfeito, muito obrigado (thank you)! But just aesthetic issues I recommend I created the component that manages private routes receiving props and your code is more reduced and clean.

[Tim Bogdanov]

component={Page} should be capital C component or should at lease be defined:

const PrivateRoute = ({component: Component}) => {

[Aspyryan]

I was using a module to route users to I only need to render the header once etc.. so in I have outlet to render the nested routes. How can I now use the with the nested routes. This was my homeModule

return (<>
<Header selectedPage={0} />
<main className="w-main flex-1 shadow-md m-auto p-5 my-5 rounded-sm flex">
  <Outlet/>
</main>
</>);

And this is how I would want to have it work:

<Route path="/" element={<PrivateOutlet />}>
  <Route exact path="/requests" element={<RequestsPage />} />
  ...
</Route>

[Aspyryan]

Whoops, I already figured it out, this was the code for my privateoutlet:

export default function PrivateOutlet() {
    const { account } = useContext(AccountContext);

    return account ? (
        <HomeModule>
            <Outlet />
        </HomeModule>
    ) : (
        <Navigate to="/login" replace />
    );
}

[All In Developer]

Yes 😊 I was about to write that you need to change PrivateOutlet

[Antonio Nogueda]

is it necesary write Outlet twice?

[Patel Ronak]

Nice 🚀🚀🚀

[obriankevin11]

How do you protect a set of routes using PrivateRoute?
Repeating ...

<Route path="/private1" element={
            <PrivateRoute>
              <Private1 />
            </PrivateRoute>
          }
        />

<Route path="/private2" element={
            <PrivateRoute>
              <Private2 />
            </PrivateRoute>
          }
        />

... is not very elegant.
Thank you!

[Pasecinic Nichita]

You could use auth-react-router package npmjs.com/package/auth-react-router

It provides a really simple API to define your routes and few more configurations (like redirect routes for authorized and unauthorized routes, fallback component for each of the routes)

Just define your routes path and pages component and it will work