How to Use React Routing and Navigation in React Applications [Tutorials]

Navigating between different views is a core aspect of almost any web application. In the world of React, react-router provides a powerful and declarative way to manage navigation and routing, allowing you to build single-page applications with seamless transitions and a rich user experience.

Why React Router?

React Router helps you manage the flow of your application by mapping URLs to specific elements or views. It provides a set of components and hooks that enable you to:

  • Define routes: Associate different URLs with corresponding elements.
  • Handle navigation: Switch between views based on user interactions or application logic.
  • Pass data between routes: Share information between different parts of your application.
  • Manage history: Provide back/forward functionality and maintain the user's navigation history.

Core Components of React Router

  • BrowserRouter: This component provides a browser-specific history object, enabling URL updates and navigation within the browser's address bar.
  • Routes: This component acts as a container for defining your application's routes. It renders the appropriate element based on the current URL.
  • Route: This component maps a specific URL path to a React element. When the URL matches the defined path, the associated element is rendered.
  • Link: This component provides declarative navigation within your application. Clicking a Link updates the URL and triggers the rendering of the corresponding route.

A React Router Example

Let's create a basic navigation example with two routes: Home and About.

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function Home() {

  return (

    <div>

      <h1>Welcome to the Home Page!</h1>

    </div>

  );

}

function About() {

  return (

    <div>

      <h1>About Us</h1>

    </div>

  );

}

function App() {

  return (

    <BrowserRouter>

      <div>

        <nav>

          <ul>

            <li>

              <Link to="/">Home</Link>

            </li>

            <li>

              <Link to="/about">About</Link>

            </li>

          </ul>

        </nav>

        <Routes>

          <Route path="/" element={<Home />} />

          <Route  

 path="/about" element={<About />} />

        </Routes>  

      </div>

    </BrowserRouter>

  );

}

In this example, we define two routes: "/" for the Home element and "/about" for the About element. The Link components in the navigation bar allow users to switch between these routes by updating the URL.

Rendering Nested Routes

You can create hierarchical navigation structures by using nested routes.  The Outlet component in React Router is used to render the sub-routes or child components of a parent route.

Here's how you can define and use nested routes:

import { BrowserRouter, Routes, Route, Link, Outlet } from 'react-router-dom';

function Dashboard() {

  return (

    <div>

      <h2>Dashboard</h2>

      <nav>

        <Link to="profile">Profile</Link> | <Link to="settings">Settings</Link>

      </nav>

      <Outlet /> {/* renders nested route components */}

    </div>

  );

}

function Profile() {

  return <h3>Profile Page</h3>;

}

function Settings() {

  return <h3>Settings Page</h3>;

}

function App() {

  return (

    <BrowserRouter>

      <Routes>

        <Route path="/" element={<Dashboard />}>

          <Route path="profile" element={<Profile />} />

          <Route path="settings" element={<Settings />} />

        </Route>

      </Routes>

    </BrowserRouter>

  );

}

In this example, the Dashboard component nests two sub-routes: Profile and Settings. The Outlet component within the Dashboard component is responsible for rendering these sub-routes based on the current URL.

Route Parameters

Route parameters are a powerful feature in React Router that allow you to create dynamic and flexible routes. By specifying dynamic segments in your route paths, you can capture values from the URL and pass them as props to your components. This can be particularly useful for rendering pages based on user input, such as viewing a user's profile or displaying a specific product.

To define route parameters, you simply include a colon followed by the parameter name in the path attribute of the Route component. For example, consider the following code snippet:

<Route path="/profile/:username" element={<Profile />} />

In this example, the Profile component is designed to accept a dynamic username parameter. When the URL matches /profile/johndoe, the username parameter will be set to johndoe, and this value can be accessed within the Profile component.

To extract the route parameter value inside the Profile component, you can use the useParams hook provided by React Router:

import { useParams } from 'react-router-dom';

function Profile() {

  const { username } = useParams();

  return (

    <h1>Profile Page</h1>

    <p>Welcome, {username}!</p>

  );

}

By using the useParams hook, the username parameter is retrieved from the URL, allowing the Profile component to render personalized content based on the user's input.

Want to master React Router or other React topics? Our React Training Courses delve deeper into the techniques described here and more, empowering you to build modern, high-performance, single-page applications.

About the Author

Chris Minnick is a renowned author, educator, and entrepreneur with over 25 years of experience in software development and education. As the CEO and co-founder of WatzThis?, he focuses on developing innovative teaching methods and courses for computer and programming skills. His extensive writing portfolio includes over 20 books, with notable titles like "Coding with AI For Dummies" (Wiley, 2024), showcasing his expertise in making complex tech concepts accessible to a wide audience. Most recently, he authored “Microsoft Copilot For Dummies” (Wiley, 2025), demonstrating how to write effective prompts, enhance output, and boost productivity in Windows and Microsoft 365.