Open In App

What is react-router-dom ?

Improve
Improve
Like Article
Like
Save
Share
Report

React Router DOM is an npm package that enables you to implement dynamic routing in a web app. It allows you to display pages and allow users to navigate them. It is a fully-featured client and server-side routing library for React. React Router Dom is used to build single-page applications i.e. applications that have many pages or components but the page is never refreshed instead the content is dynamically fetched based on the URL. This process is called Routing and it is made possible with the help of React Router Dom.

The major advantage of react-router is that the page does not have to be refreshed when a link to another page is clicked, for example. Moreover, it is fast, very fast compared to traditional page navigation. This means that the user experience is better and the app has overall better performance.

React Router Dom v6 has many useful components and to create fully functioning routing, you need most of these.

  1. Router(usually imported as BrowserRouter):  It is the parent component that is used to store all of the other components. Everything within this will be part of the routing functionality
  2. Routes: routes are used to define the navigation paths within a single-page application (SPA). Routes determine which components should be rendered based on the current URL or location of the application.
  3. Route: This component checks the current URL and displays the component associated with that exact path. All routes are placed within the Routes components.
  4. Link: Link component is used to create links to different routes.

The Route component takes 2 parameters. The first one is the path that will be in the url and the second is the component that will be displayed if the current URL matches the path in the first parameter. 

Example: Below is an example in which we create a simple react app using React Router Dom. The app will contain 4 pages. i.e. 1 home page and 3 sample pages. The user will navigate between these pages with the help of routing and links.

Steps to Implement React-router-dom

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Project Structure: Your project directory may look like this.

We will do most of our work in the app.js file which is in the src folder.

Step 3: Next, install react-router-dom using the following command

npm install react-router-dom

Updated dependencies:

 "dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.22.3",
"react-scripts": "5.0.1",
},

Step 4: Now, create a new folder in src called Components. Within this folder, create 3 files:

  1. page1.js
  2. page2.js
  3. page3.js

Add the following code to all the pages:

Javascript
import React from 'react'

export default function Page1() {
    return (
        <div>
            <h1>Page 1</h1>
        </div>
    )
}
Javascript
import React from 'react'

export default function Page2() {
    return (
        <div>
            <h1>Page 2</h1>
        </div>
    )
}
Javascript
import React from 'react'

export default function Page3() {
    return (
        <div>
            <h1>Page 3</h1>
        </div>
    )
}

Project Structure: It will now look like the following. 

Project Directory

Step 5: Now, import the needed components for the demo inside App.js. Then add the following code in App.js. Here we are first importing the 3 pages, then inside the Router a Routes is added. inside the Routes, 4 Route are added, one for the home page and 3 for the other pages. The list contains clickable links that a user can click to navigate.

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

// Import the pages

import Page1 from "./Components/page1"
import Page2 from "./Components/page2"
import Page3 from "./Components/page3"

// Import css
import "./app.css"

function App() {
    return (
        <div className="App">
            <Router>
                <Routes>
                    <Route exact path="/" element={<h1>Home Page</h1>} />
                    <Route exact path="page1" element={<Page1 />} />
                    <Route exact path="page2" element={<Page2 />} />
                    <Route exact path="page3" element={<Page3 />} />
                </Routes>
                <div className="list">
                    <ul>
                        <li><Link to="/">Home</Link></li>
                        <li><Link to="page1">Page 1</Link></li>
                        <li><Link to="page2">Page 2</Link></li>
                        <li><Link to="page3">Page 3</Link></li>
                    </ul>
                </div>
            </Router>
        </div>
    );
}
export default App;

Step 6: You can improve the design and make the app more presentable using the following CSS. Add it to App.css (create it if it is not already there).

CSS
* {
    padding: 0;
    margin: 0;
}

h1 {
    text-align: center;
    font-size: 45px;
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(6, 0, 32);
    padding: 40px;
}

.list {
    display: flex;
    justify-content: center;
    width: 100%;
}

.list ul li {
    list-style: none;
    margin: 42px;
    text-align: center;
}

a {
    text-decoration: none;
    color: rgb(0, 0, 0);
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    padding: 14px 25px;
    background-color: transparent;
    border: 2px solid rgb(12, 0, 66);
}

a:hover {
    background-color: rgb(12, 0, 66);
    color: rgb(255, 255, 255);
}

Step to run the application: Open the terminal and type the following command.

npm start

Output:

React Router dom example

Conclusion

React Router Dom is a powerful routing library for building web applications with React. It provides a declarative and efficient way to handle navigation, define routes, and render components based on the current URL. Whether you’re building a simple application with a few routes or a complex single-page application, React Router Dom offers the necessary tools and components to manage your application’s routing needs.



Last Updated : 20 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads