React Router

What is Routing

Routing means showing different components based on the URL — without reloading the page. For example, if the URL is /about, the About component is displayed. Routing loads the appropriate component based on the current URL.

Unlike traditional multi-page applications, where each page requires a full HTTP request and response cycle, React Router allows for seamless navigation within a single-page application (SPA).

In SPA, content loads in the DOM, and React Router manages the transitions between these views. The page will not reload.

Example

1. / → Home page
2. /about → About page
3. /contact → Contact page

React Router handles this smoothly inside the browser.

Install React Router

By default, React Router is not included in a standard React project. You need to install it manually.

To install React Router, run the following command in your project directory:

For macOS and Linux

This command installs the React Router DOM package, which is specifically designed for web applications.

Install through yarn

Basic Routing Setup

To set up basic routing in a React application, you need to wrap your application with the BrowserRouter component from react-router-dom.

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

function App() {
  return (
    <BrowserRouter>
      {/* Routes will go here */}
    </BrowserRouter>
  );
}

export default App;

Next, define your routes using the Routes and Route components.

Define Routes

Use the Routes component to define multiple routes, and the Route component to specify each route's path and corresponding component.

import { Routes, Route } from "react-router-dom";

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/contact" element={<Contact />} />
    </Routes>
  );
}

export default Routes;

path: The path attribute defines the URL path for the route. For example, path="/" matches the root URL, and path="/about" matches the /about URL.

element: The element attribute specifies the component to render when the route is matched.

Creating Pages

Create separate React components for each page in your application. For example, create Home.js, About.js, and Contact.js files.

Define Homepage

// Home.js
import React from "react";
function Home() {
  return <h2>Welcome to the Home Page</h2>;
}
export default Home;

Define About Page

// About.js
import React from "react";
function About() {
  return <h2>About Us</h2>;
}
export default About;

Define Contact Page

// Contact.js
import React from "react";
function Contact() {
  return <h2>Contact Us</h2>;
}
export default Contact;
 

Add Navigation using Link

To navigate between different routes without reloading the page, use the Link component from react-router-dom. It allows you to create links that change the URL and render the corresponding component.

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

function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link> | 
      <Link to="/about">About</Link> | 
      <Link to="/contact">Contact</Link>
    </nav>
  );
}

export default Navbar;

Test Routing

Now our basic routing setup is complete. You can test the routing by navigating between the different pages using the links in the navigation bar.

When you click on the links, the URL will change, and the corresponding component will be rendered without reloading the page.

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

import Routes from "./Routes";

import Navbar from "./Navbar";

function App() {
  return (
    <BrowserRouter>
      <header>
        <h1>My React Router App</h1>        
      </header>

      <Navbar />
      
      <main>
        <Routes>
      </main>
      
      <footer>
        <p>© 2026 My React Router App</p>
      </footer>      
    </BrowserRouter>
  );
}
export default App;

Now our app is fully functional with routing capabilities. You can click the links in the navigation bar to navigate between different pages.

When you click on the links, the URL will change, and the corresponding component will be rendered without reloading the page. This is the core functionality of React Router.

Using useNavigate

The useNavigate hook allows you to programmatically navigate between routes. It returns a function that you can call with a path or an object containing navigation options.

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

function Login() {
  const navigate = useNavigate();

  const handleLogin = () => {
    navigate("/dashboard");
  };

  return <button onClick={handleLogin}>Login</button>;
}
   

Dynamic Routes

Dynamic routes allow you to pass parameters in the URL and access them within your components. Use the colon (:) syntax in the path to define a parameter.

<Route path="/users/:id" element={<User />} />

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

function UserProfile() {
  const { id } = useParams();
  return <h2>User Profile for User ID: {id}</h2>;
}
  

Nested Routes

Nested routes allow you to create hierarchical routing structures. You can define nested routes within a parent route by using the Outlet component in the parent component.

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

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
      <Outlet />
    </div>
  );
}

<Route path="/dashboard" element={<Dashboard />}>
  <Route path="profile" element={<Profile />} />
  <Route path="settings" element={<Settings />} />
</Route>

Protected Routes

Protected routes restrict access to certain routes based on authentication or authorization. You can create a custom component that checks the user's authentication status before rendering the protected route.

    function ProtectedRoute({ isAuth, children }) {
  if (!isAuth) {
    return <Navigate to="/login" />;
  }
  return children;
}

<Route
  path="/dashboard"
  element={
    <ProtectedRoute isAuth={true}>
      <Dashboard />
    </ProtectedRoute>
  }
/>

Conclusion

React Router is essential for building dynamic single-page applications in React. By mastering routing, navigation, and advanced features like dynamic and nested routes, you can create seamless user experiences. Remember to refer to the official React Router documentation for the latest updates and additional features.