React Router 6 - Private Route Component to Restrict Access to Protected Pages
Tutorial built with React 18.1.0 and React Router 6.3.0
This is a quick example of how to implement a private route component with React Router 6. The private route component is used to protect selected pages in a React app from unauthenticated users.
The below code snippets are from a React + Redux JWT authentication tutorial I posted recently that includes a live demo, so to see the code running check out React 18 + Redux - JWT Authentication Example & Tutorial.
React Router 6 Private Route
The react private route component renders child components (children) if the user is logged in. If not logged in the user is redirected to the /login page with the return url passed in the location state property.
The current logged in user (authUser) is retrieved from Redux state with a call to the useSelector() hook. Redux is used in this example however it is not required to implement a Private Route component in React Router 6. You could use a different state management library or any approach you prefer to get the logged in status of the user.
import { Navigate } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { history } from '_helpers';
export { PrivateRoute };
function PrivateRoute({ children }) {
const { user: authUser } = useSelector(x => x.auth);
if (!authUser) {
// not logged in so redirect to login page with the return url
return <Navigate to="/login" state={{ from: history.location }} />
}
// authorized so return child components
return children;
}React App Component with Protected Route
The App component is the root component of the example app, it contains the outer html, main nav and routes for the application.
The /login route is public, and the home route (/) is protected by the private route component that uses Redux to check if the user is logged in.
The last route is a catch-all redirect route that redirects any unmatched paths to the home page.
import { Routes, Route, Navigate, useNavigate, useLocation } from 'react-router-dom';
import { history } from '_helpers';
import { Nav, PrivateRoute } from '_components';
import { Home } from 'home';
import { Login } from 'login';
export { App };
function App() {
// init custom history object to allow navigation from
// anywhere in the react app (inside or outside components)
history.navigate = useNavigate();
history.location = useLocation();
return (
<div className="app-container bg-light">
<Nav />
<div className="container pt-4 pb-4">
<Routes>
<Route
path="/"
element={
<PrivateRoute>
<Home />
</PrivateRoute>
}
/>
<Route path="/login" element={<Login />} />
<Route path="*" element={<Navigate to="/" />} />
</Routes>
</div>
</div>
);
}
Subscribe or Follow Me For Updates
Subscribe to my YouTube channel or follow me on Twitter, Facebook or GitHub to be notified when I post new content.
- Subscribe on YouTube at https://www.youtube.com/JasonWatmore
- Follow me on Twitter at https://twitter.com/jason_watmore
- Follow me on Facebook at https://www.facebook.com/JasonWatmoreBlog
- Follow me on GitHub at https://github.com/cornflourblue
- Feed formats available: RSS, Atom, JSON
Other than coding...
I'm currently attempting to travel around Australia by motorcycle with my wife Tina on a pair of Royal Enfield Himalayans. You can follow our adventures on YouTube, Instagram and Facebook.
- Subscribe on YouTube at https://www.youtube.com/TinaAndJason
- Follow us on Instagram at https://www.instagram.com/tinaandjason
- Follow us on Facebook at https://www.facebook.com/TinaAndJasonVlog
- Visit our website at https://tinaandjason.com.au
Need Some React Help?
Search fiverr to find help quickly from experienced React developers.
Support my work
