React Router Introduction

React Router is a routing library used to manage navigation in React applications.

It allows different URLs to display different React components.

/home
/about
/contact
/products

Each URL can be associated with a particular component.

A real-world application usually contains multiple views such as:

• Home
• About
• Contact
• Products
• Login
• Dashboard

Routing allows users to move between these views using different URLs.

React applications are commonly built as Single Page Applications (SPAs).

In an SPA, the browser can update the displayed content without requesting a completely new HTML document for every navigation.

Browser
   ↓
React Application
   ↓
Route
   ↓
Component

React Router provides client-side routing.

The application can respond to URL changes and render the appropriate component without requiring a traditional full-page navigation for each route.

/about → About component
/contact → Contact component

React Router can be installed using npm.

npm install react-router-dom

The package is commonly used for routing in React applications running in the browser.

The react-router-dom package provides routing features for React applications that run in web browsers.

After installation, routing components and hooks can be imported from the package.

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

BrowserRouter provides the routing context for a browser-based React application.

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

function App() {
    return (
        <BrowserRouter>
            <h1>My React App</h1>
        </BrowserRouter>
    );
}

Components that use routing features are normally placed inside the router.

The Routes component contains the route definitions for an application.

<Routes>

    {/* routes go here */}

</Routes>

Individual Route components are normally placed inside Routes.

A Route connects a URL path with a React element.

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

When the URL matches /about, the About element can be rendered.

A basic React Router structure can look like this:

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

function App() {

    return (
        <BrowserRouter>

            <Routes>

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

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

            </Routes>

        </BrowserRouter>
    );
}

A route can render a normal React component.

function Home() {
    return (
        <h1>Home Page</h1>
    );
}

export default Home;

This component can then be connected to the home route.

function About() {
    return (
        <h1>About Page</h1>
    );
}

export default About;

The component can be displayed when the user visits the corresponding route.

An application can contain multiple routes.

<Routes>

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

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

    <Route
        path="/contact"
        element={<Contact />}
    />

</Routes>

The path / commonly represents the home page.

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

When the application URL points to the root path, the Home component can be displayed.

A navigation menu provides links that allow users to move between routes.

function Navbar() {

    return (
        <nav>
            <a href="/">Home</a>
            <a href="/about">About</a>
        </nav>
    );
}

React Router also provides a special component called Link for application navigation.

The Link component is used to create navigation links in a React Router application.

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

function Navbar() {

    return (
        <nav>

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

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

        </nav>
    );
}

The to prop tells the Link component which route should be opened.

<Link to="/contact">
    Contact
</Link>

Here, clicking the link navigates to the /contact route.

Traditional HTML navigation commonly uses an anchor element:

<a href="/about">About</a>

React Router provides:

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

For navigation within a React Router application, Link is commonly used because it integrates with client-side routing.

React Router's navigation components allow the application to change the displayed route while keeping the React application active.

<Link to="/products">
    Products
</Link>

This is one of the important benefits of client-side routing.

For larger applications, pages can be separated into folders.

src/
├── pages/
│   ├── Home.jsx
│   ├── About.jsx
│   └── Contact.jsx
│
├── components/
│   └── Navbar.jsx
│
└── App.jsx

This organization can make routing and application maintenance easier.

Page components can be imported into the component that defines the routes.

import Home from "./pages/Home";
import About from "./pages/About";
import Contact from "./pages/Contact";

These components can then be used inside Route definitions.

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

function Home() {
    return <h2>Home</h2>;
}

function About() {
    return <h2>About</h2>;
}

function App() {

    return (
        <BrowserRouter>

            <nav>

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

                {" "}

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

            </nav>

            <Routes>

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

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

            </Routes>

        </BrowserRouter>
    );
}

export default App;

React Router checks the current URL and determines which route matches the URL.

/about

If the application contains:

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

The About element is rendered for that route.

A simple application may have routes such as:

/              → Home
/about         → About
/services      → Services
/contact       → Contact
/login         → Login
/dashboard     → Dashboard

Each route can be connected to a separate React component.

The router can also be placed around the application at the entry point. For example:

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(
    <BrowserRouter>
        <App />
    </BrowserRouter>
);

In this structure, routing components inside App can use the router context.

Components such as Link, Routes, and Route need to be used within the appropriate router context.

<BrowserRouter>

    <Navbar />

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

</BrowserRouter>

• Creates multiple application routes.
• Connects URLs with React components.
• Supports client-side navigation.
• Helps build Single Page Applications.
• Provides navigation components.
• Supports nested and dynamic routes.
• Can be used for authentication-based navigation.
• Helps organize larger React applications.

• Forgetting to install react-router-dom.
• Forgetting to import router components.
• Using Route outside Routes.
• Using routing components without router context.
• Using incorrect route paths.
• Forgetting to provide the element prop.
• Using incorrect Link paths.

A basic React Router workflow is:

1. Install React Router
        ↓
2. Import router components
        ↓
3. Create page components
        ↓
4. Create BrowserRouter
        ↓
5. Define Routes
        ↓
6. Add Route components
        ↓
7. Add Link navigation
        ↓
8. Test different URLs

• Keep page components organized.
• Use meaningful route paths.
• Use Link for internal application navigation.
• Keep navigation components reusable.
• Use descriptive component names.
• Keep route definitions easy to understand.
• Test every important route.
• Learn dynamic and nested routes for larger applications.
• Handle invalid URLs appropriately.
• Keep authentication and protected routing logic organized.

URL → Route → React Component