React has no built-in router. Most React apps handle routing with React Router, now on v8, or with a framework like Next.js that comes with file-based routing. If you're building a client-side app and want full control over your routes, React Router is the standard choice; if you also need server rendering and data loading out of the box, start with a framework instead (see Next.js vs React).

React is an open-source frontend JavaScript library that allows developers to create websites and user interfaces using UI components and single-page applications. Routing is one of the most important features we always want to implement when developing these applications.

Routing redirects users to different pages based on their actions or requests. In React routing, you'll use an external library called React Router, which can be challenging to configure if you need help understanding how it works.

In this article, we will show you how to perform routing in React using React Router. Learn the various routing aspects and how React Router handles them, such as dynamic routing, programmatic navigation, no-matching routes, etc.

#Getting started

To fully comprehend and follow this guide, we would create an application that properly illustrates all aspects of navigation with appropriate use cases. We would create/use a cocktails app that retrieves data from Hygraph via GraphQL. This application, which can be accessed via this live link, uses all aspects of routing covered in this guide.

Prerequisite

You should have the following to follow along with this guide and code:

• A fundamental understanding of HTML, CSS, and JavaScript
• Some experience or knowledge of React
• Node 22 or later and npm or yarn installed on your machine
• A React application set up with Vite. Create React App, which earlier versions of this guide used, was sunset by the React team in February 2025.

To create the app, run the following command and pick React when Vite asks for a framework:

npm create vite@latest cocktails-app

#Adding React Router to our app

How to install React Router

As previously stated, React makes use of an external library to handle routing; however, before we can implement routing with that library, we must first install it in our project, which is accomplished by running the following command in your terminal (within your project directory):

npm install react-router

After successfully installing the package, we can set up and configure React Router for our project.

If you've used React Router before, you may know the react-router-dom package. In v7 it became a thin re-export of react-router, and v8 removed it, so every import in this guide comes from react-router.

React Router modes in one minute

Since v7, React Router can be used in three ways, and you pick one per app:

• Declarative mode is the classic setup: <BrowserRouter>, <Routes> and <Route> in JSX, plus Hooks like useNavigate and useParams. This guide uses declarative mode.
• Data mode moves route configuration out of JSX into createBrowserRouter, which adds loaders, actions and pending states for data loading and form submissions.
• Framework mode wraps React Router in a Vite plugin with file-based routes, server rendering, code splitting and type-safe route modules. It's the successor to Remix and the closest to a full framework like Next.js.

Start with declarative mode when you're adding routes to an existing client-side app. Move to data or framework mode when you want React Router to load data and render on the server for you.

How to setup React Router

To configure React Router, navigate to the main.jsx file, which is the root file, and import BrowserRouter from the react-router package that we installed, wrapping it around our App component as follows:

// main.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router';
import App from './App';
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
   <React.StrictMode>
      <BrowserRouter>
         <App />
      </BrowserRouter>
   </React.StrictMode>
);

#How to configure routes in React

We have now successfully installed and imported React Router into our project; the next step is to use React Router to implement routing. The first step is configuring all of our routes (all the pages/components we want to navigate).

We would first create those components, in our case, three pages: the Home page, the About Page, and the Products Page. This GitHub repository contains the content for these pages. Once those pages are properly configured, we can now set up and configure our routes in the App.jsx file, which serves as the foundation for our React application:

// App.jsx
import { Routes, Route } from 'react-router';
import Home from './Pages/Home';
import About from './Pages/About';
import Products from './Pages/Products';
 
const App = () => {
   return (
      <>
         <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/products" element={<Products />} />
            <Route path="/about" element={<About />} />
         </Routes>
      </>
   );
};
 
export default App;

We can see in the above code that we imported Routes and Route components from react-router and then used them to declare the routes we want. All Routes are wrapped in the Routes tag, and these Routes have two major properties:

• path: As the name implies, this identifies the path we want users to take to reach the set component. When we set the path to /about, for example, when the user adds /about to the URL link, it navigates to that page.

• element: This contains the component that we want the set path to load. This is simple to understand, but remember to import any components we are using here, or else an error will occur.

When we go to our browser and try to navigate via the URL, it will load whatever content we have on such pages.

Adding a navigation bar

Let us now create a standard Navigation bar component that can be used to navigate inside our application.

First, create the Navbar component.

// Components/NavBar.jsx

import { NavLink } from "react-router";

const NavBar = () => {
  return (
    <nav>
      <ul>
        <li>
          <NavLink to="/">Home</NavLink>
        </li>
        <li>
          <NavLink to="/about">About</NavLink>
        </li>
        <li>
          <NavLink to="/products">Products</NavLink>
        </li>
      </ul>
    </nav>
  );
};

export default NavBar;

The NavLink component from React Router is a special component that helps you navigate different routes using the to prop. The NavLink component also knows whether the route is currently "active" and adds a default active class to the link. We can use this class in our CSS to define some styling for active links, as shown below:

// index.css


ul li a {
  color: #000;
}


ul li a:hover {
  color: #00a8ff;
}

ul li a.active {
  color: #00a8ff;
}

Also, we can assign our custom classes instead of using the default active class. The NavLink component gives us access to properties like isActive, which can be used like this.

...
<li>
  <NavLink
    to="/"
    className={({ isActive }) => {
      return isActive ? "active-link" : "";
    }}
  >
    Home
  </NavLink>
</li>
...

Finally, let us use the Navbar component inside our App.

// App.jsx

import NavBar from "./Components/NavBar";
import { Routes, Route } from "react-router";


const App = () => {
  return (
    <>
      <NavBar />
      <Routes>
      ...
      </Routes>
    </>
  );
};
export default App;

How to fix No Routes Found Error

When routing, a situation may cause a user to access an unconfigured route or a route that does not exist; when this occurs, React does not display anything on the screen except a warning with the message "No routes matched location."

This can be fixed by configuring a new route to return a specific component when a user navigates to an unconfigured route as follows:

// App.jsx
import { Routes, Route } from 'react-router';
import NoMatch from './Components/NoMatch';

const App = () => {
   return (
      <>
         <Routes>
            {/* ... */}
            <Route path="*" element={<NoMatch />} />
         </Routes>
      </>
   );
};

export default App;

In the preceding code, we created a route with the path * to get all non-configured paths and assign them to the attached component.

#How to navigate programmatically in React

Programmatic navigation is the process of navigating/redirecting a user as a result of an action on a route, such as a login or a signup action, order success, or when they click on a back button.

Let's first look at how we can redirect to a page when an action occurs, such as when a button is clicked. We accomplish this by adding an onClick event, but first, we must create the route in our App.jsx file. After that, we can import the useNavigate hook from react-router and use it to navigate programmatically as follows:

// Products.jsx
import { useNavigate } from 'react-router';
 
const Products = () => {
   const navigate = useNavigate();
   return (
      <div className="container">
         <div className="title">
            <h1>Order Product CockTails</h1>
         </div>
         <button className="btn" onClick={() => navigate('order-summary')}>
            Place Order
         </button>
      </div>
   );
};
 
export default Products;

<button className="btn" onClick={() => navigate(-1)}>
   Go Back
</button>

Ensure you already have the useNavigate hook imported and instantiated as we did earlier else this won’t work.

#How to implement dynamic routing with React Router

We created three files in our pages folder earlier to implement routing, one of which was the products component, which we will populate with Hygraph content. We created a schema in Hygraph to receive cocktail details, and this is how it looks:

We then filled it in with cocktail specifics. We will now use GraphQL to retrieve these data so that we can consume them in our React project. This is how the products page appears:

// Products.jsx

import { useState, useEffect } from "react";
import { useNavigate } from "react-router";
import { getAllCocktails } from "../api";
import ProductCard from "../Components/ProductCard";

const Products = () => {
  const [products, setProducts] = useState([]);
  const navigate = useNavigate();

  useEffect(() => {
    const fetchProducts = async () => {
      const { cocktails } = await getAllCocktails();
      setProducts(cocktails);
    };
    fetchProducts();
  }, []);

  return (
    <div className="container">
      <button className="btn" onClick={() => navigate(-1)}>
        Go Back
      </button>
      <div className="title">
        <h1>CockTails</h1>
      </div>
      <div className="cocktails-container">
        {products.map((product) => (
          <ProductCard key={product.id} product={product} />
        ))}
      </div>
    </div>
  );
};

export default Products;

// Components/ProductCard.jsx

import { Link } from "react-router";

const ProductCard = ({ product }) => {
  if (!product) {
    return null;
  }
  return (
    <div className="cocktail-card">
      <img src={product.image.url} alt="" className="cocktail-img" />
      <div className="cocktail-info">
        <div className="content-text">
          <h2 className="cocktail-name">{product.name}</h2>
          <span className="info">{product.info}</span>
        </div>
        <Link to={`/products/${product.slug}`}>
          <div className="btn">View Details</div>
        </Link>
      </div>
    </div>
  );
};

export default ProductCard;

We fetched our content from Hygraph in the preceding code; if you already created your own schema, you can simply change the Endpoint URL and possibly the schema name if you gave it a different name.

We added a Link and used string interpolation to dynamically attach the slug of each product to the path, so we can get the slug and use it to get the data to show.

Let us now put dynamic routing into action.

The first step would be to create the component that we want to render dynamically, and for that we would create a ProductDetails.jsx file where we would dynamically fetch details of each product based on the slug passed through the URL, but for now we can just place dummy data into the component like this:

// ProductDetails.jsx
const ProductDetails = () => {
   return (
      <div className="container">
         <h1>Products Details Page</h1>
      </div>
   );
};
 
export default ProductDetails;

We can now proceed to create a route to handle dynamic routing in our App.jsx file this way:

// App.jsx
import { Routes, Route } from 'react-router';
// ...
import ProductDetails from './Pages/ProductDetails';
 
const App = () => {
   return (
      <>
         <Routes>
            {/* ... */}
            <Route path="/products/:slug" element={<ProductDetails />} />
         </Routes>
      </>
   );
};
 
export default App;

So far, we've dealt with the first part of dynamic routing. We must now obtain the parameter passed through the URL in order to dynamically query the data for the specific cocktail. This will be accomplished through the use of URL params.

How to use URL params to handle dynamic routing

We will import the useParams hook into the ProductDetails component so that we can use it to get the URL parameter and then use that parameter to query our data from Hygraph via GraphQL.

// ProductDetails.jsx
import { useState, useEffect } from "react";
import { useNavigate, useParams } from "react-router";
import { getProductBySlug } from "../api";

const ProductDetails = () => {
  const [product, setProduct] = useState(null);
  const navigate = useNavigate();

  // Fetch slug from route parameters
  const { slug } = useParams();

  useEffect(() => {
    const fetchProduct = async () => {
      const { cocktail } = await getProductBySlug(slug);
      setProduct(cocktail);
    };
    fetchProduct();
  }, [slug]);

  return (
    <div className="container">
      {/* ...Product Details template */}
    </div>
  );
};

export default ProductDetails;

At this point, we have successfully been able to get the URL param passed. The getProductBySlug function lives in a small api.js file next to getAllCocktails and sends the GraphQL query to Hygraph:

// api.js
const endpoint = import.meta.env.VITE_HYGRAPH_ENDPOINT;

async function request(query, variables = {}) {
  const response = await fetch(endpoint, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ query, variables }),
  });
  const { data } = await response.json();
  return data;
}

export const getAllCocktails = () =>
  request(`{ cocktails { id name info slug image { url } } }`);

export const getProductBySlug = (slug) =>
  request(
    `query GetCocktail($slug: String!) {
      cocktail(where: { slug: $slug }) { id name info slug image { url } }
    }`,
    { slug }
  );

With the data in place, we have successfully implemented dynamic routing.

#How to implement lazy loading with React Router

We've already seen how to create routes and implement routing with React Router; now let's look at how to lazy load routes with React Router.

Lazy loading is a technique in which components that are not required on the home page are not loaded until a user navigates to that page, allowing our application to load faster than having to wait for the entire app to load at once. This contributes to improved performance, which leads to a positive user experience.

To implement lazy loading, simply go to App.jsx and wrap our routes with the Suspense component, along with a fallback props that are rendered on the screen until the component loads:

// App.jsx
import { lazy, Suspense } from 'react';
import { Routes, Route } from 'react-router';
 
import NavBar from './Components/NavBar';
const Home = lazy(() => import('./Pages/Home'));
const About = lazy(() => import('./Pages/About'));
const Products = lazy(() => import('./Pages/Products'));
const ProductDetails = lazy(() => import('./Pages/ProductDetails'));
const NoMatch = lazy(() => import('./Components/NoMatch'));
 
const App = () => {
   return (
      <>
         <NavBar />
         <Suspense fallback={<div className="container">Loading...</div>}>
            <Routes>
               <Route path="/" element={<Home />} />
               <Route path="/about" element={<About />} />
               <Route path="/products" element={<Products />} />
               <Route path="/products/:slug" element={<ProductDetails />} />
               <Route path="*" element={<NoMatch />} />
            </Routes>
         </Suspense>
      </>
   );
};
 
export default App;

In data and framework mode, React Router can also lazy load route modules for you through the lazy route property, so you don't need to wrap routes in Suspense yourself.

#Where does the content behind your routes come from?

Every dynamic route in this app, like /products/:slug, is really a lookup: take the slug from the URL and ask a content API for the matching entry. That only stays simple when slugs, fields and content types are defined in a schema, so each route maps to one entry and nothing breaks when editors add the next cocktail. A schema like that also helps an AI coding agent generate the page or loader for a new route from your real model. Hygraph, the agentic content platform and headless CMS, gives you that model and a GraphQL API, and its MCP server lets Claude Code, Cursor or VS Code draft entries and read the schema without being able to delete or unpublish anything. When you're ready to grow the demo, read how to build your React app on a headless CMS.

#Conclusion

We learned about routing and how to implement it in our React application in this guide. It is critical to understand that React Router is what allows us to perform single-page routing without reloading the application.