React Router DOM

React Router DOM: A Comprehensive Guide

Introduction

React Router DOM is a routing library built on top of React Router that helps in implementing dynamic routing in a web application. It allows you to create a single-page application (SPA) with navigation without the page refreshing as the user navigates. In this article, we will cover the basics of React Router DOM, how to set it up, and how to implement advanced routing techniques.

Getting Started

To get started with React Router DOM, you need to have a React application set up. If you don't already have one, you can create it using Create React App:

npx create-react-app my-app

Next, you need to install React Router DOM:

npm install react-router-dom

Basic Usage

Let's start with some basic usage of React Router DOM. Here is a simple example of how you can set up routing in your React application:

(router.jsx)

import { createBrowserRouter } from "react-router-dom";
import App from "./App";

const router = createBrowserRouter([
    {
        path: '/',
        element: 
    }
])

export default router;
            

In this example, we use the createBrowserRouter function to create a router with a single route that renders the App component for the root path. We then export this router.

Rendering the Router

To render the router, we need to wrap our application with the RouterProvider component. Here is an example of how to do that in your main.jsx file:

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App.jsx';
import router from './router.jsx';
import { RouterProvider } from 'react-router-dom';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <RouterProvider router={router} />
  </StrictMode>,
);
            

In this example, we use the createRoot function from react-dom/client to render our application. We wrap the App component with the RouterProvider component, passing in the router we created earlier.

Nested Routes

React Router DOM also supports nested routes. Here is an example of how you can create nested routes:

import { createBrowserRouter } from "react-router-dom";
import App from "./App";
import Topics from "./Topics";
import Topic from "./Topic";

const router = createBrowserRouter([
    {
        path: '/',
        element: ,
        children: [
            {
                path: 'topics',
                element: ,
                children: [
                    {
                        path: ':topicId',
                        element: 
                    }
                ]
            }
        ]
    }
])

export default router;
            

In this example, we have a Topics component that renders a list of topics and nested routes for each topic. The Topic component is used to render the content for a specific topic based on the topicId parameter from the URL.

Programmatic Navigation

React Router DOM also provides a way to navigate programmatically. You can use the useNavigate hook to navigate programmatically. Here is an example:

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

function Home() {
    let navigate = useNavigate();

    function handleClick() {
        navigate('/about');
    }

    return (
        <div>
            <h2>Home</h2>
            <button onClick={handleClick}>Go to About</button>
        </div>
    );
}

export default Home;
            

In this example, clicking the button will navigate the user to the /about route.

Conclusion

React Router DOM is a powerful library for handling routing in React applications. It provides a simple and declarative way to define routes and navigate between them. With the ability to create nested routes, handle parameters, and perform programmatic navigation, it covers most of the common routing needs in web applications. By understanding and utilizing React Router DOM, you can create complex and dynamic web applications with ease.

© 2025 Your Name. All rights reserved.