DEV Community

🔐 Private Route in React Router v6

Andrei L on September 21, 2021

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, r...

Read full post

Kevin H Griffith • Mar 30 '22

Awesome man! Huge thanks 🙏

Femi Obadimu • Feb 16 '22

thanks

Aspyryan • Nov 20 '21

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 • Nov 20 '21

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

Andrei L • Nov 20 '21

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

Antonio Nogueda • Jan 30 '22 • Edited

is it necesary write Outlet twice?

Yeee • Sep 7 '22

Awesome !

Dhenyson Jhean • Jan 26 '22

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 • Feb 4 '22 • Edited

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

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

Minh Kì Đông • May 30 '22

Great

Viney Rawat • Sep 23 '21

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

Mahedi Hassan Sharif • Jun 29 '22

Awesome very Good Brother! Many Many Thanks.

Pasecinic Nichita • Jan 6 '22

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

Pablo Junior Almonte Avila • Jun 4 '22

Amazing tutorial, thank you ❤️

obriankevin11 • Dec 31 '21 • Edited

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!

Patel Ronak • Apr 12 '22

Nice 🚀🚀🚀

Muhammad Masudur Rahman • Mar 29 '22

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.

Andrei L • Mar 29 '22

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

Muhammad Masudur Rahman • Mar 29 '22

"< 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.

Muhammad Masudur Rahman • Mar 29 '22 • Edited

"< 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.

Steve Reid • Jan 13 '22

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

<Route
  path="/"
  element={user ? <Home /> : <Navigate to="/login" />}
/>

James Russel Ceballos • Mar 29 '22

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

Andrei L • Jan 13 '22

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

Rakeshmokariya • Jan 24 '22 • Edited

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

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

Andrei L • Jan 24 '22

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

UraFIZ • Sep 23 '21

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

Andrei L • Sep 23 '21 • Edited

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

UraFIZ • Sep 23 '21

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.

Andrei L • Sep 23 '21 • Edited

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.

Andrei L • Sep 23 '21

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

Ian Jones • Nov 17 '21

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

Ian Jones • Nov 17 '21

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

Andrei L • Nov 18 '21

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>

now

<Route path="/private-outlet" element={<PrivateOutlet />}>
  <Route path="" element={<Private />} />
</Route>

Nivethan Ariyaratnam • Dec 30 '21

thanks man

SURAJ_P • Aug 16 '22

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>

Andrei L • Aug 16 '22

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!

Raja Muhammad Asher • Dec 10 '21

Thank you. Helped a lot.

Andrei L • Dec 10 '21

You are welcome! 🤗

ContriverH • Jan 17 '22

Thanks a lot man. You are the savior

Oreva Chike Philips • Nov 22 '23

Hello, Just incase you see this, this is my protected route,

import { Navigate } from "react-router-dom";
import { useSelector } from "react-redux";
import {
selectIsAuthenticated,
selectUserLoading,
} from "../../features/user/userSlice";
import Loader from "../../components/Layout/Loader";

const ProtectedRoute = ({ Component }) => {
const isAuthenticated = useSelector(selectIsAuthenticated);
const loading = useSelector(selectUserLoading);

if (loading === true) {
return (

);
}
return isAuthenticated ? : ;
};

export default ProtectedRoute;

it Works fine but I want to improve it for user experience, when a user hard reloads the page from a browser, I want the user to be returned back to the page it was on, but it gets directed back to the Home page of the application if the user is logged it, but if the user is not logged it, it will go to the login page,
I also feel the glitch might be from my App.js component, which I will paste part of the code below,

function App() {
const dispatch = useDispatch();
const user = useSelector(selectUser);
const seller = useSelector(selectSeller);
const loading = useSelector(selectUserLoading);
const sellerLoading = useSelector(selectSellerLoading);
const allProducts = useSelector(selectAllProducts);
const allEvents = useSelector(selectAllEvents);
const token = localStorage.getItem("token");
const sellerToken = localStorage.getItem("seller_token");

useEffect(() => {
dispatch(getAllProducts());
dispatch(getAllEvents());

if (token) {
  dispatch(LoadUser());
}
if (sellerToken) {
  dispatch(LoadSeller());
}

}, [dispatch, sellerToken, token]);
return (
<>

  <ThemeProvider theme={theme}>
    <div className="w-screen min-h-[100vh] lg:pr-2">
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route
          path="/login"
          element={
            <LoginRoute>
              <LoginPage />
            </LoginRoute>
          }
        />
        <Route
          path="/register"
          element={
            <LoginRoute>
              <RegisterPage />
            </LoginRoute>
          }
        />
        <Route
          path="/payment"
          element={
            <ProtectedRoute>
              <PaymentPage />
            </ProtectedRoute>
          }
        />
        <Route
          path="/activation/:activation_token"
          element={<ActivationPage />}
        />
        <Route
          path="/seller/activation/:activation_token"
          element={<SellerActivationPage />}
        />

        <Route path="/products" element={<ProductsPage />} />
        <Route path="/product/:id" element={<ProductDetailsPage />} />
        <Route path="/best-selling" element={<BestSellingPage />} />
        <Route path="/events" element={<EventPage />} />
        <Route path="/faq" element={<FAQPage />} />
        <Route
          path="/profile"
          element={<ProtectedRoute Component={ProfilePage} />}
        />
        <Route
          path="/profile/orders"
          element={<ProtectedRoute Component={OrderPage} />}
        />
        <Route
          path="/profile/refunds"
          element={<ProtectedRoute Component={RefundPage} />}
        />
        <Route
          path="/profile/inbox"
          element={<ProtectedRoute Component={InboxPage} />}
        />
        <Route
          path="profile/payment-method"
          element={<ProtectedRoute Component={PaymentMethodPage} />}
        />
        <Route
          path="profile/change-password"
          element={<ProtectedRoute Component={ChangePasswordPage} />}
        />
        <Route
          path="profile/address"
          element={<ProtectedRoute Component={AddressPage} />}
        />

Spot how all warpped the protected Route inside my Route,

Kindly reply

SURAJ_P • Aug 16 '22

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;

Alexandru Barbulescu • Mar 9 '23 • Edited

Could you please wrap children with fragment in "PrivateRoute" (<>children</>)?

Thank you!

Andrei L • Mar 10 '23

Hi Alexandru! Why would that be needed 🤔

You use it like this

<PrivateRoute>
  <Private1 />
  <Private2 />
</PrivateRoute>

Both private components are passed inside as children as an array of JSX Elements [JSX.Element, JSX.Element]

React knows how to render them.

Alexandru Barbulescu • Mar 10 '23

Hi Andrew!

In TypeScript (although this doesn't apply to your case, it can be confusing for beginners), the PrivateRoute component should return a JSX.Element. If the children prop is not wrapped in a React.Fragment (<>...</>), TypeScript will start to show an error:

PrivateRoute cannot be used as a JSX component.
Its return type 'Element | undefined' is not a valid JSX element.
Type 'undefined' is not assignable to type 'Element | null'.

Since a React component should return a JSX element or null, a correct implementation to solve this problem would be to wrap the children in a React.Fragment like this: <> {children} </>.

Hope this helps...

Andrei L • Mar 10 '23

I see. Although this seems to happen only if the component is typed 🤔
Having a simple function as a component in TS I see no errors. Nevertheless, thanks for the tip, I'm updating the code.

Alexandru Barbulescu • Mar 10 '23

Yes. For me it was a bit confusing given that my components are typed. Thank you!

Brandon McConnell • Jan 1 '22

This article was a lifesaver as I migrate from React Router v5 to v6. Thank you! 🏆️

haiderali22 • Oct 27 '21

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

Andrei L • Oct 27 '21

useRoutes([
  {
    path: "/private",
    element: (
      <PrivateRoute>
        <Private />
      </PrivateRoute>
    ),
  },
]);

Al Nahian Ark • Nov 12 '21

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

Andrei L • Nov 12 '21

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} />
}