Navigating an application securely is crucial for any React app with authenticated users. When setting up routes in an application, we can categorize them as public, private, or protected based on whether users need to log in or possess specific roles to access them. Using React Router v6, we will create a robust routing structure.

Setting Up Route Components

Create three separate components — PublicRoute, PrivateRoute, and ProtectedRoute — in a middleware folder within the src folder.

PublicRoute: This is for routes accessible by users who are not logged in.
PrivateRoute: This is for routes accessible only to authenticated users.
ProtectedRoute: This is for routes accessible only to authenticated users with specific roles.

We will use the Redux Toolkit to manage user states in our examples. You can also use Context API or another state management library.

1. PublicRoute Component

The PublicRoute component allows unauthenticated users access to specific routes, such as the login or sign-up pages. If a user is logged in, PublicRoute redirects them to the homepage or another designated page.

// PublicRoute.js

import { useSelector } from "react-redux";

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

const PublicRoute = () => {

const { user } = useSelector((state) => state.userState);

return user ? <Navigate to="/" /> : <Outlet />;

};

export default PublicRoute;

2. PrivateRoute Component

The PrivateRoute component restricts access to routes that require authentication. If a user is not logged in, they are redirected to the login page.

// PrivateRoute.js

import { useSelector } from "react-redux";

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

const PrivateRoute = () => {

const { user } = useSelector((state) => state.userState);

return user ? <Outlet /> : <Navigate to="/login" />;

};

export default PrivateRoute;

3. ProtectedRoute Component

The ProtectedRoute component checks both user authentication and role. If a user lacks the necessary role(s), they are redirected to another page (e.g., the homepage or an error page).

// ProtectedRoute.js

import { useSelector } from "react-redux";

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

const ProtectedRoute = ({ allowedRoles }) => {

const { user } = useSelector((state) => state.userState);

if (!user) {

return <Navigate to="/login" />;

}

if (!allowedRoles.includes(user.role)) {

return <Navigate to="/" />;

}

return <Outlet />;

};

export default ProtectedRoute;

Each component uses useSelector from react-redux to check the current user’s status in the userState slice.

Setting Up the User State with Redux Toolkit

Below is a basic Redux slice setup for the user state:

import { createSlice } from "@reduxjs/toolkit";

const getUserFromLocalStorage = () => {

const user = localStorage.getItem("user");

return user ? JSON.parse(user) : null;

};

const initialState = {

user: getUserFromLocalStorage(),

};

const userSlice = createSlice({

name: "user",

initialState,

reducers: {

loginUser: (state, action) => {

const { user, token } = action.payload;

const activeUser = { ...user, token: token };

state.user = activeUser;

localStorage.setItem("user", JSON.stringify(activeUser));

},

logoutUser: (state) => {

state.user = null;

localStorage.removeItem("user");

},

},

});

export const { loginUser, logoutUser } = userSlice.actions;

export default userSlice.reducer;

Organizing Routes in the `App` Component

Now that we have our middleware route components, we can organize our routes inside the App component.

Each route type — public, private, and protected — wraps the components or pages it controls within PublicRoute, PrivateRoute, or ProtectedRoute. Here’s how to structure the routes in your App component:

// App.js

import {

createBrowserRouter,

createRoutesFromElements,

Route,

RouterProvider,

} from "react-router-dom";

import { useSelector } from "react-redux";

import PublicRoute from "./components/middleware/PublicRoute";

import PrivateRoute from "./components/middleware/PrivateRoute";

import ProtectedRoute from "./components/middleware/ProtectedRoute";

import RootLayout from "./layouts/RootLayout";

import Home from "./pages/Home";

import About from "./pages/About";

import Login from "./pages/Login";

import AdminLayout from "./layouts/AdminLayout";

import Dashboard from "./pages/admin/Dashboard";

// Import other pages...

const App = () => {

const router = createBrowserRouter(

createRoutesFromElements(

{/* Public Routes */}

{/* Other public pages */}

</Route>

{/* Private Routes */}

{/* Other private pages */}

</Route>

{/* Protected Routes */}

{/* Other admin pages */}

</Route>

</Route>

</Route>

)

);

return <RouterProvider router={router} />;

};

export default App;

In this setup:

The home and about pages will be accessible to unauthenticated and authenticated users.
Public routes are available to unauthenticated users.
Private routes are only accessible to logged-in users.
Protected routes are only accessible to users with specific roles, like admin.

Final Thoughts

With React Router v6 and these middleware components, we can build a transparent, secure, and maintainable routing setup that controls user access based on their authentication and roles. This setup also organizes your route components, ensuring maintainability as the app scales. Feel free to use Redux Toolkit, Context API, or any other state management library to manage user data.