Mahalakshmi C

Posted on Oct 7

React Router DOM

#react

What is React Router DOM?

React Router DOM is a library used in React applications to handle routing and navigation.

Routing means displaying different components or pages based on the URL.

For example, a blog application may have:

/              → Home
/about         → About
/blog          → Blog
/contact       → Contact

React Router allows users to move between these pages without completely reloading the browser page.

Why Do We Use React Router?

React applications are often Single Page Applications (SPAs). This means the application can display different content without loading a completely new HTML page from the server for every navigation.

React Router helps us:

Create different routes
Navigate between pages
Display different components for different URLs
Create dynamic routes
Handle nested routes
Navigate programmatically

Installing React Router DOM

First, install the package:

npm install react-router-dom

Then we can use it in our React application.

Important Components

Some commonly used React Router features are:

BrowserRouter
Routes
Route
Link
NavLink
useNavigate
useParams

Basic Example

Suppose we have a simple blog with three pages:

Home
Blog
About

App.jsx

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

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

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

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

function App() {
    return (
        <BrowserRouter>

            <nav>
                <Link to="/">Home</Link>
                <Link to="/blog">Blog</Link>
                <Link to="/about">About</Link>
            </nav>

            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/blog" element={<Blog />} />
                <Route path="/about" element={<About />} />
            </Routes>

        </BrowserRouter>
    );
}

export default App;

How Does This Code Work?

1. BrowserRouter

<BrowserRouter>

BrowserRouter enables routing in the React application and uses the browser's URL to manage navigation.

2. Routes

<Routes>

Routes contains all the routes defined in the application.

3. Route

<Route path="/blog" element={<Blog />} />

A Route connects a URL path with a React component.

Here:

/blog → Blog component

When the browser URL becomes /blog, React Router displays the Blog component.

4. Link

<Link to="/blog">Blog</Link>

Link is used to navigate between routes.

When the user clicks Blog, React Router changes the URL and displays the Blog component without performing a full page reload.

Dynamic Routing

React Router can also create dynamic routes.

For example, a blog may have different posts:

/blog/1
/blog/2
/blog/3

We can create a dynamic route using:

<Route path="/blog/:id" element={<BlogPost />} />

Here, :id is a dynamic parameter.

We can access it using useParams().

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

function BlogPost() {

    const { id } = useParams();

    return <h1>Blog Post ID: {id}</h1>;
}

If the URL is:

/blog/10

the output will be:

Blog Post ID: 10

useNavigate

useNavigate is used when we want to navigate to another route using JavaScript.

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

function Login() {

    const navigate = useNavigate();

    function handleLogin() {
        navigate("/home");
    }

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

After clicking the button, the user is navigated to /home.

React Router Flow

User clicks a Link
       ↓
URL changes
       ↓
React Router checks the URL
       ↓
Matching Route is found
       ↓
Corresponding Component is rendered
       ↓
UI is updated

Important Points

BrowserRouter enables routing.
Routes contains the application's routes.
Route connects a URL path with a component.
Link is used for navigation.
useParams accesses dynamic URL parameters.
useNavigate allows navigation using JavaScript.
React Router allows navigation without a full page reload.

Conclusion

React Router DOM provides a simple way to implement navigation and routing in React applications. It is especially useful for applications with multiple views, such as blogs, dashboards, shopping websites, and portfolio applications.

DEV Community