How to Centralize Routes in React Like a Pro (Beginner-Friendly Guide)

Divam Jain — Fri, 11 Apr 2025 10:48:42 +0000

1. Why Centralize Routes in React?

Have you ever opened a React project and found a giant, messy App.jsx cluttered with dozens of routes? Or struggled to manage different user roles (like admin vs. regular users) because routes were scattered everywhere?

Centralizing your routes solves these problems by:

Keeping your code clean
Making maintenance easier
Improving scalability
Supporting role-based routing

2. Prerequisites

Before we dive into centralizing routes in React, make sure you have these basics covered:

React Fundamentals

Familiarity with components, JSX, and props.
If you're new, check out the Learn React documentation
React Router Installed
This guide uses react-router-dom v6+.

Install it in your project:

npm install react-router-dom

A React Project Set Up
Use create-react-app, Vite, or your preferred setup.
Basic Understanding of Routing
Know how , , and work.

That’s it! If you have these ready, you’re all set to follow along.

3. Step-by-Step Implementation

A. Folder Structure

src/
├── router/
│   ├── UserRoutes.jsx
│   ├── AdminRoutes.jsx
│   └── AllRoutes.jsx

B. Create Route Files

UserRoutes.jsx

const UserRoutes = [
   {
     path:"/",
     element:<Home/>
  },
  {
    path: "/dashboard",
    element: <UserDashboard />
  },
  {
    path: "/profile",
    element: <UserProfile />
  }
];

export default UserRoutes;

Similarly create AdminRoutes.jsx as UserRoutes.jsx is created

C. Combine Routes

AllRoutes.jsx

import UserRoutes from './UserRoutes';
import AdminRoutes from './AdminRoutes';
import { Routes,Route} from 'react-router-dom'
const IndexRoutes=[...UserRoutes,...AdminRoutes]

const AllRoutes=()=>{
return (
    <Routes>
        {IndexRoutes.map((item,index)=>(
          <Route key={index} path={item.path} element={item.element}/>
        ))}
    </Routes>
  )
}

D._ Implement in App.jsx_

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import AllRoutes from './router/AllRoutes';

function App() {
  return (
    <BrowserRouter>
      <AllRoutes/>
    </BrowserRouter>
  );
}

DEV Community: Divam Jain

How to Centralize Routes in React Like a Pro (Beginner-Friendly Guide)

1. Why Centralize Routes in React?

2. Prerequisites

3. Step-by-Step Implementation