A complete guide to routing in React

React is an open-source frontend JavaScript framework 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 a 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 and npm or yarn installed on your machine
• Set up a React Application using Create React 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-dom

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

How to setup React router

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

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
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.js file, which serves as the foundation for our React application:

// App.js
import { Routes, Route } from 'react-router-dom';
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-dom 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.

// component/NavBar.js

import { NavLink } from "react-router-dom";

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-dom 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.js

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


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.js
import { Routes, Route } from 'react-router-dom';
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 he clicks 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.js file. After that, we can import the useNavigate hook from the react-router-dom and use it to navigate programmatically as follows:

// Products.js
import { useNavigate } from 'react-router-dom';
 
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 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.js

import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
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 product={product} />
        ))}
      </div>
    </div>
  );
};

export default Products;

// components/ProductCard.js

import { Link } from "react-router-dom";

const ProductCard = ({ product }) => {
  if (!product) {
    return null;
  }
  return (
    <div key={product.id} 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 ProductDetials.js 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.js
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.js file this way:

// App.js
import { Routes, Route } from 'react-router-dom';
// ...
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 urlParams.

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.js
import { useState, useEffect } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { getProductBySlug } from "../api";

const ProductDetails = () => {
  const [product, setProduct] = useState([]);
  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, let’s now make use of this slug to fetch data from Hygraph using GraphQL:

At this point, 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.js and wrap our routes with the Suspense component, along with a fallback props that are rendered on the screen until the component loads:

// App.js
import { lazy, Suspense } from 'react';
import { Routes, Route } from 'react-router-dom';
 
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;

#Conclusion

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