Make Private Route with React Router V6 in React.js

Private Route plays a great important role in every Application or Website . With Private Route we can create user’s Authentication and Role base Authentication. Private Routes make a Website secure. In this article I am going to discuss following topics…

1. What is React.js…?
2. What is React Router Dom…?
3. What is Private Route…?
4. How can we make Private Route with React Router V6 in React.js

What is React.js

React is a JavaScript library created by Facebook. React is a UI library. React is a tool for building or creating UI Components. Means React is used to make Front part of a Website.

What is React Router Dom..?

We know that React is a single page library. We can’t create multiple pages in React. So, for creating multiple page we use React Router Dom. So, we can say React Router Dom is a technique which through we can make multiple pages or dynamic page in React.

What is Private Route..?

Private Route is a one kind of Route System which allows users to visit a particular route or URL. With Private Route we also make role base access like normal users, admin, manager and so on. Means we can combine various kinds of route with Private Route. It provides website and application security.

How can we make Private Route……?

At first we have to make Private Route Component. And we have to follow following code…

import { Navigate} from "react-router-dom";

function PrivateRoute({ children }) {
 
const token= window.localStorage.getItem("token"); 
 
 return token? <>{children}</> : <Navigate to="/" />;

}
export default PrivateRoute;

After we have to combine what kinds of components we want to combine with Private Route…

import './App.css';
import Dashboard from './pages/Dashboard';
import Home from './pages/Home';
import Login from './pages/Login';
import Nabvar from './pages/Nabvar';
import Registration from './pages/Registration';
import { Route, Routes } from 'react-router-dom'

import NotFound from './pages/NotFound';
import ProductManagement from './pages/ProductManagement';
import PrivateRoute from './pages/PrivateRoute';

function App() {
  
  return (
    <>
    <div className="App">

     <Nabvar />
    <Routes>
    <Route path='/' element={<Home />} />
    <Route path='/home' element={<Home />} />
    <Route path='/login' element={<Login />} />
    <Route path='/register' element={<Registration />} />

{/* This is private route  */}

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

 <Route path="/product"
 element={<PrivateRoute>
<ProductManagement />
</PrivateRoute>} 
/>
           
<Route path='*' element={<NotFound />} />
 </Routes>
        
      </div>
    </>
  );
}

export default App;

Here is different way implementation of Private Route using Outlet

import { Navigate, Outlet } from "react-router-dom";


function AdminRoute() {
const token=window.localStorage.getItem("token");
 const role= window.localStorage.getItem("role")
 
return   role?<Outlet/>: <Navigate to={"/"}/>
  
      }
export default AdminRoute

After we have to write App Component . The App Component look like….

import './App.css';
import Home from './pages/Home';
import Login from './pages/Login';
import Nabvar from './pages/Nabvar';
import Registration from './pages/Registration';
import { Route, Routes } from 'react-router-dom'
import User from './pages/User';
import NotFound from './pages/NotFound';
import Profile from './Component/Profile/Profile';
import Deliver from './Component/Deliver/Deliver';
import AdminRoute from './pages/AdminRoute';



function App() {
  
  return (
    <>
      <div className="App">

        <Nabvar />
        <Routes>
  <Route path='/' element={<Home />} />
   <Route path='/home' element={<Home />} />
   <Route path='/login' element={<Login />} />
   <Route path='/register' element={<Registration />} />

{/* This is admin route or Private Route */}
        
<Route  element={<AdminRoute />}>
  <Route path='profile' element={<Profile />} />
   <Route path='deliver' element={<Deliver />} />
   <Route path='user' element={<User/>}/>
   </Route>
      
<Route path='*' element={<NotFound />} />
 </Routes>
      </div>
    </>
  );
}

export default App;

I think the above things will help you so much to make a secure App or Website. It will add a great value to your life.

Do Coding, Have fun!