Centralized Route Configuration

The useRoutes hook enables a configuration-based approach to routing in React, allowing developers to define routes in a JavaScript array rather than JSX.

Basic Setup without Lazy Loading

Create a dedicated configuration file to define path mappings and associated components.

// config/router.js
import { Navigate } from "react-router-dom";
import Dashboard from "../views/Dashboard";
import Profile from "../views/Profile";
import Inventory from "../views/Inventory";
import ItemDetails from "../views/Inventory/ItemDetails";
import Reviews from "../views/Inventory/Reviews";

const routeConfig = [
  {
    path: "/",
    element: ,
  },
  {
    path: "/dashboard",
    element: ,
  },
  {
    path: "/profile",
    element: ,
  },
  {
    path: "/inventory",
    element: ,
    children: [
      {
        path: "details",
        element: ,
      },
      {
        path: "reviews",
        element: 
      }
    ],
  },
];

export default routeConfig;

In the root component, invoke useRoutes with the configuration array.

// App.jsx
import { Link, useRoutes } from "react-router-dom";
import routeConfig from "./config/router";

function App() {
  const routing = useRoutes(routeConfig);

  return (
    <>
      
      

      {routing}
    
  );
}

export default App;

The entry point must wrap the application in BrowserRouter.

// main.jsx
import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")).render(
  
    
      
    
  
);

Implementing Nested Routes

Parent components containing child routes must utilize the Outlet component to render the matched child view.

// views/Inventory.jsx
import React from "react";
import { Outlet, Link } from "react-router-dom";

export default function Inventory() {
  return (
    <>
      
Inventory Management
      

        Item Details | 
        Reviews
      
      

      
    
  );
}

Optimizing with Code Splitting

To reduce initial bundle size, components can be loaded on-demand using React.lazy. Since lazy-loaded components render asynchronously, they must be wrapped in Suspense to provide a fallback UI during loading.

A utility function can encapsulate this logic to keep the route configuration clean.

// config/router.js
import React from "react";
import { Navigate } from "react-router-dom";

// Helper to wrap lazy components with Suspense
const createLazyRoute = (componentPath) => {
  const LazyComponent = React.lazy(() => import(`../views/${componentPath}`));
  
  return (
    Loading module...