Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

What is react-router-dom ?

  • Last Updated : 16 Nov, 2021

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 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. Switch: Switch component is used to render only the first route that matches the location rather than rendering all matching routes.
  3. Route: This component checks the current URL and displays the component associated with that exact path. All routes are placed within the switch 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.



Below is the step by step implementation:

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

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:

page1.js




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

page2.js




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

page3.js




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 Switch is added. inside the Switch 4 Routes 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.

App.js




import { BrowserRouter as Router, Route, Link, Switch} 
        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>
        <Switch>
          <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 />} />
        </Switch>
        <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).

App.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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!