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>
);
}
Need Some React Help?
Search fiverr to find help quickly from experienced React freelance developers.
Follow me for updates
I share all new blog posts on Twitter and Facebook.
When I'm not coding
My wife and I are attempting to ride motorcycles around Australia and vlog about it on YouTube.
Comments
Support the blog
