How to use Private route in react-router-dom@v6

Question

I want to use private route with react-router-dom v6, while i am trying to apply a condition for auth.

In App.js

<Route path='/dashboard' element= { <PrivateRoute><Abc /></PrivateRoute>}/>

In a component .js

<Routes> <Route {...rest} render={props => !isAuthenticated && !loading ? (<Navigate to='/login' />) : (<Component {...props} />)} /></Routes>

• When the Route is not inside <Routes> it gives an error:

Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your in a <Routes>

• When it is inside <Routes> it give an error as:

Error: [Abc] is not a <Route> component. All component children of must be a <Route> or <React.Fragment>

Pls help me to resolve this situation ? Or any suggestion.

Tried this but one of the above error in both cases

<Route path='/dashboard' element= {<PrivateRoute> <Dashboard />
         </PrivateRoute>}/>

Also

`<PrivateRoute path='/dashboard' element= { <Dashboard />}/>`

PICCode full

Answer 1

In react-router-dom version 6 there is no render prop for the Route component. You can also simplify your PrivateRoute wrapper component a bit, it doesn't need to render more Routes and Route components.

Conditionally render the component's children or navigate to log in.

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

Usage:

<Route
  path="/dashboard"
  element={
    <PrivateRoute>
      <Dashboard />
    </PrivateRoute>
  }
/>

A slightly improved version to allow nesting more private route components utilizes an outlet to handle rendering out nested routes.

const PrivateWrapper = ({ auth: { isAuthenticated } }) => {
  return isAuthenticated ? <Outlet /> : <Navigate to="/login" />;
};

Usage:

<Route element={<PrivateWrapper />}>
  <Route path="/dashboard" element={<Dashboard />} />
</Route>

Answer 2

Here is a private route you can use and its working currently at v6.0.2

export const PrivateRoute = ({ children}) => {
  const isAuthenticated = true;
      
  if (isAuthenticated ) {
    return children
  }
    
  return <Navigate to="/" />
}

This is how you would use the private route

 <Route
          path="/dashboard"
          element={
            <PrivateRoute>
              <Dashboard />
            </PrivateRoute>
          }
        />

Answer 3

Here is a different implementation of PrivateRoute using Outlet

import {
  Routes,
  Route,
  BrowserRouter,
  Link,
  Navigate,
  Outlet
} from "react-router-dom";

export default function App() {
  return (
    <BrowserRouter>
      <MyMenu />
      <Routes>
        <Route path="/" element={<Public />} />
        <Route element={<PrivateOutlet />}>
          <Route path="/private-outlet" element={<Private />} />
        </Route>
        <Route path="/login" element={<Login />} />
      </Routes>
    </BrowserRouter>
  );
}

const Public = () => <div>public</div>;
const Private = () => <div>private</div>;
const Login = () => <div>login</div>;

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

function MyMenu() {
  return (
    <nav>
      <Link to="/">Public</Link>
      {" | "}
      <Link to="/private-outlet">Private Using Outlet</Link>
    </nav>
  );
}

change useAuth return from true to false like below

function useAuth() {
      return false;
    }

then you will see the difference.

Answer 4

PrivateRoutes Component

import React from 'react'
import { Outlet, Navigate } from 'react-router-dom'



export default function PrivateRoutes() {
    let  userid = localStorage.getItem("token") == null ? false : true;
    return (
        <>
            {userid ? <Outlet  /> : <Navigate to="/signin" />};
        </>

    )

}

App.js :

import './App.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Home from './container/Home/Home'
import Signin from './container/Signin/Signin'
import Signup from './container/Signup/Signup'
import PrivateRoute from './components/HOC/privateRoute'
function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
        <Route exact element={<PrivateRoute  />}>
            <Route exact path="/" element={<Home />} />
          </Route>
          <Route path='/signin' element={<Signin />} />
          <Route path='/signup' element={<Signup />} />
          <Route />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

Answer 5

For Typescript users, something like this will work. Assumes you're using npm package react-router-dom.

import {
  Navigate,
  RouteProps,
} from 'react-router-dom';

export function PrivateRoute({ children }: RouteProps): JSX.Element {
  const isLoggedIn = checkUser() // check cookie or local storage etc.
  return (
    <>
      {isLoggedIn
        ? children
        : <Navigate to="/sign-in"/>
      }
    </>
  );
}

Then in your routes:

function App() {
  return (
      <Routes>
        <Route
          path="/"
          element={
            <PrivateRoute>
              <DashboardPage />
            </PrivateRoute>
          }
        />
        <Route path="/sign-in" element={<SignInPage />}/>
        <Route path="/sign-up" element={<SignUpPage />}/>
      </Routes>
  );
}