DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for πŸ” Private Route in react-router v6
πŸ₯‘ Andrew Luca
πŸ₯‘ Andrew Luca

Posted on

πŸ” Private Route in react-router v6

Things are changing fast in WEB today, and react-router v6 is in beta already and around the corner. πŸ€”

This is just for learning purposes only, react-router v6 is still in beta, use at your own risk

Private routes in v5 and below were done in a specific way using a custom component mostly named PrivateRoute that was most of the times just a wrapper and composition of basic Route and Redirect e.g.

function PrivateRoute({ children, ...rest }) {
  let auth = useAuth();
  return (
    <Route
      {...rest}
      render={() => auth
        ? children
        : <Redirect to="/login" />
      }
    />
  );
}

function App() {
  return (
    <BrowserRouter>
      <Route path="/" component={Public} />
      <PrivateRoute path="/private" component={Private} />
    </BrowserRouter>
  );
}
Enter fullscreen mode Exit fullscreen mode

But taking a look at v6 docs it seems that things changed a little bit, and we need to think a little bit different about it.

For info about all API reference see the link

Let's move on.

Some things that we used to create PrivateRoute have changed a little bit

  • Redirect is now Navigate
  • Route props changed and is just a stub component now
  • A new component Routes appearead

In v6, routes are rendered in such a manner

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

const Public = () => <div>public</div>;
const Private = () => <div>private</div>;
Enter fullscreen mode Exit fullscreen mode

So as you can see, no more render props or component prop.
You need to pass a direct JSX element (don't worry about performance if you do)

Ok now let's take a look at Route component source code

/**
 * Declares an element that should be rendered at a certain URL path.
 *
 * @see https://reactrouter.com/api/Route
 */
export function Route(_props: RouteProps): React.ReactElement | null {
  invariant(
    false,
    `A <Route> is only ever to be used as the child of <Routes> element, ` +
      `never rendered directly. Please wrap your <Route> in a <Routes>.`
  );
}
Enter fullscreen mode Exit fullscreen mode

wait a minute

Wait a minute where is the code? πŸ‘€ Well actually the parent component Routes will use the Route just as a host for the props and children, and do nothing more with the Route

For more info about Routes implementation see link

So how we do implement our PrivateRoute now? πŸ€” If we do some adjustments to PrivateRoute props, it will look like this

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

But this will not work. Routes will just take the props of PrivateRoute and ignore it's body totally. Even a console.log inside PrivateRoute will not be shown.

So what we do? πŸ€” We do some more adjustments to PrivateRoute

function PrivateRoute({ children }) {
  const auth = useAuth();
  return auth ? children : <Navigate to="/login" />;
}
Enter fullscreen mode Exit fullscreen mode

As you can see we changed Redirect to Navigate, and just return children if user is authenticated. And the usage of it also changes a little bit

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

As you can see PrivateRoute also moves to element prop.

The implementation of PrivateRoute can be done in multiple ways.

Here is a different implementation of PrivateRoute using Outlet

function PrivateOutlet() {
  const auth = useAuth();
  return auth ? <Outlet /> : <Navigate to="/login" />;
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/private-outlet" element={<PrivateOutlet />}>
          <Route element={<Private />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}
Enter fullscreen mode Exit fullscreen mode

The pros of this is that you can put multiple private sub routes under same route.

For a full example see this Codesandbox

That's all for today. Happy coding! πŸŽ‰ 🎊 ✨

Keep your users secure!

secure

Cover Photo by Maxim Zhgulev on Unsplash

Top comments (54)

Collapse
thatgriffith profile image
Kevin H Griffith

Awesome man! Huge thanks πŸ™

Collapse
femiobadimu profile image
Femi Obadimu

thanks

Collapse
aspyryan profile image
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>
</>);
Enter fullscreen mode Exit fullscreen mode

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

<Route path="/" element={<PrivateOutlet />}>
  <Route exact path="/requests" element={<RequestsPage />} />
  ...
</Route>
Enter fullscreen mode Exit fullscreen mode
Collapse
aspyryan profile image
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 />
    );
}
Enter fullscreen mode Exit fullscreen mode
Collapse
iamandrewluca profile image
πŸ₯‘ Andrew Luca Author

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

Collapse
tonnov profile image
Antonio Nogueda • Edited on

is it necesary write Outlet twice?

Collapse
dongloo profile image
Minh Kì Đông

Great

Collapse
vineyrawat profile image
Viney Rawat

ΰ€Άΰ€Ύΰ€¨ΰ€¦ΰ€Ύΰ€° ΰ€²ΰ₯‡ΰ€– ΰ€­ΰ€Ύΰ€ˆ

Collapse
dhenyson profile image
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.

Example

Collapse
timbogdanov profile image
Tim Bogdanov • Edited on

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

const PrivateRoute = ({component: Component}) => {
Enter fullscreen mode Exit fullscreen mode
Collapse
lukrisum profile image
Yeee

Awesome !

Collapse
mahedi5061 profile image
Mahedi Hassan Sharif

Awesome very Good Brother! Many Many Thanks.

Collapse
obriankevin11 profile image
obriankevin11 • Edited on

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>
          }
        />
Enter fullscreen mode Exit fullscreen mode

... is not very elegant.
Thank you!

Collapse
pabloalmonte profile image
Pablo Junior Almonte Avila

Amazing tutorial, thank you ❀️

Collapse
nichitaa profile image
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

Collapse
ronakptl996 profile image
Patel Ronak

Nice πŸš€πŸš€πŸš€

Collapse
masudur10 profile image
Masudur Rahman

In this react-router version 6 implementation,how i can show alert or popup message for unlogged user when i trying to navigate private route? if user not logged-in it will show the message "please login first" with login button to navigate login page.

if user not logged-in, user always navigate/redirected to home page or other public route.

Collapse
iamandrewluca profile image
πŸ₯‘ Andrew Luca Author

See this example, when you do the redirect, you can pass some state
in the login component use that state to show the message

dev.to/iamandrewluca/comment/1jjm9

Collapse
ian_jones_c4d87258f948f0d profile image
Ian Jones

Your Outlet example doesn't work with react-router-dom v6.0.2 . Any idea why?

Collapse
ian_jones_c4d87258f948f0d profile image
Ian Jones

Appears to have broken in react-router-dom 6.0.0-beta.6

Collapse
iamandrewluca profile image
πŸ₯‘ Andrew Luca Author

Updated react-router-dom to last version and updated example.

It seems that you need to pass path to nested routes also, it wasn't the case in earlier versions

it was

<Route path="/private-outlet" element={<PrivateOutlet />}>
  <Route element={<Private />} />
</Route>
Enter fullscreen mode Exit fullscreen mode

now

<Route path="/private-outlet" element={<PrivateOutlet />}>
  <Route path="" element={<Private />} />
</Route>
Enter fullscreen mode Exit fullscreen mode
Collapse
urafiz profile image
UraFIZ

Whan can we use it in create-react-app?

Collapse
iamandrewluca profile image
πŸ₯‘ Andrew Luca Author • Edited on

Whenever you want. CRA does not have a router installed by default. But keep in mind it is in beta.

Collapse
urafiz profile image
UraFIZ

Bro, you are mistaken. I gave it a try to use all the new features of v6 and didn't succeed coz something under the hood used a history.push.

Thread Thread
iamandrewluca profile image
πŸ₯‘ Andrew Luca Author • Edited on

That CRA does not use a router by default I'm very sure. It depends what version of router do you have installed at the moment.

Thread Thread
iamandrewluca profile image
πŸ₯‘ Andrew Luca Author

See codesandbox liinks at the end. In that examples I'm using CRA

Collapse
masudur10 profile image
Masudur Rahman

In this react-router version 6 implementation,how i can show alert or popup message for unlogged user when i trying to navigate private route? if user not logged-in it will show the message "please login first" with login button.

"< L i n k to='/login' > login< L i n k >"

if user not logged-in, user always navigate/redirected to home page or other public route.

Collapse
masudur10 profile image
Masudur Rahman • Edited on

In this react-router version 6 implementation,how i can show alert or popup message for unlogged user when i trying to navigate private route? if user not logged-in it will show the message "please login first" with login button.

"< L i n k to='/login' > login< L i n k >"

if user not logged-in, user always navigate/redirected to home page or other public route.

Collapse
stevereid profile image
Steve Reid

I might of missed something, but is there anything wrong with doing something like this?

<Route
  path="/"
  element={user ? <Home /> : <Navigate to="/login" />}
/>
Enter fullscreen mode Exit fullscreen mode
Collapse
cebkun profile image
James Russel Ceballos

I think you should navigate to "/dashboard" (or wherever you want him to go after logging in) instead of "/login".

Collapse
iamandrewluca profile image
πŸ₯‘ Andrew Luca Author

πŸ€” looking at this it should work, I don't know if react-router can detect the full tree of routes using this way πŸ€”

Collapse
rakeshmokariya profile image
Rakeshmokariya • Edited on

I can't understand what is 'children' and what it return ?

function PrivateRoute({ children }) {
const auth = useAuth();
return auth ? children : <Navigate to="/login" />;
}

Collapse
iamandrewluca profile image
πŸ₯‘ Andrew Luca Author

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>
  );
}
Enter fullscreen mode Exit fullscreen mode
Collapse
rakeshmokariya profile image
Rakeshmokariya

Ok i understood.Thank you so much.

Collapse
devopshasan profile image
Hasan Habib

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

Thread Thread
iamandrewluca profile image
πŸ₯‘ Andrew Luca Author • Edited on

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode
Collapse
surajrp profile image
SURAJ_P

I am getting the duplicate records but my keys are different
Is it correct which I have implemented

PrivateRouter.js

import { Outlet, Navigate } from 'react-router-dom';
const PrivateRouter = (props) => {
const firstLogin = localStorage.getItem('firstLogin')
return firstLogin ? :
};

export default PrivateRouter;

App.js

      <Routes>
        <Route exact path="/" element={auth.token ? <Home/> : < Login/>} />
        <Route exact path="/register" element={<Register/>}/>
        <Route element={<Layout />}>
          <Route element={<PrivateRouter />}>
            <Route exact path="/:page" element={<PageRender/>}/>
            <Route exact path="/:page/:id" element={<PageRender/>} />
          </Route>
        </Route>
      </Routes>
Enter fullscreen mode Exit fullscreen mode
Collapse
iamandrewluca profile image
πŸ₯‘ Andrew Luca Author

Can you please review again your post, add more context to the subject, and fix the broken code? Ping me after that, and I'll take a look!

Collapse
surajrp profile image
SURAJ_P

How to call this is app.js
import { Outlet, Navigate } from 'react-router-dom';

const PrivateRouter = (props) => {
const firstLogin = localStorage.getItem('firstLogin')
return firstLogin ? :
};

export default PrivateRouter;

Collapse
contriverh profile image
ContriverH

Thanks a lot man. You are the savior

Collapse
brandonmcconnell profile image
Brandon McConnell

This article was a lifesaver as I migrate from React Router v5 to v6. Thank you! πŸ†οΈ

Collapse
nivethan profile image
Nivethan Ariyaratnam

thanks man

Collapse
rajamuhammadasher profile image
Raja Muhammad Asher

Thank you. Helped a lot.

Collapse
iamandrewluca profile image
πŸ₯‘ Andrew Luca Author

You are welcome! πŸ€—

Collapse
arknahian profile image
Al Nahian Ark

Ok, but how can I set a state and redirect the users from there they came from

Collapse
iamandrewluca profile image
πŸ₯‘ Andrew Luca Author

You put some state in Navigation props, and on login after submit redirect back, something like this

function PrivateRoute() {
  const location = useLocation()
  return <Navigation to="/login" state={{ from: location.pathname }} />
}

function Login() {
  const navigate = useNavigate()
  const location = useLocation()

  const onSubmit = () => fetch("/api/login").then(() => navigate(location.state.from))

  return <form onSubmit={onSubmit} />
}
Enter fullscreen mode Exit fullscreen mode
Collapse
hexclan profile image
hexclan • Edited on

I use this method, but there is a problem (may not be a problem), the url address in the address bar will display "/login" first and then return to the private page. Is there any way to prevent the url of the address bar from changing when checking auth?

Already logged in user, refresh page.

Thread Thread
iamandrewluca profile image
πŸ₯‘ Andrew Luca Author

You mean to prevent before user is clicking a link? πŸ€” Didn't quite get what exactly do you mean.

Collapse
haiderali22 profile image
haiderali22

How can I use this with useRoutes hook provided in react router v6

Collapse
iamandrewluca profile image
πŸ₯‘ Andrew Luca Author
useRoutes([
  {
    path: "/private",
    element: (
      <PrivateRoute>
        <Private />
      </PrivateRoute>
    ),
  },
]);
Enter fullscreen mode Exit fullscreen mode
Collapse
kisankumavat85 profile image
Kisan Kumavat

It helped a lot, Thanks buddy!

Collapse
iamandrewluca profile image
πŸ₯‘ Andrew Luca Author

πŸ€— Glad could help!

Collapse
aaron__ahn profile image
Aaron Ahn

It worked! Thank you so much :D

Collapse
sanyogchangmai profile image
Sanyog Changmai

Thank you very much....its very helpful

🌚 Life is too short to browse without dark mode