What is react-router-dom ? - GeeksforGeeks

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.
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 functionalitySwitch: Switch component is used to render only the first route that matches the location rather than rendering all matching routes.Route: This component checks the current URL and displays the component associated with that exact path. All routes are placed within the switch components.Link: Link component is used to create links to different routes.
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
Switch: Switch component is used to render only the first route that matches the location rather than rendering all matching routes.
Route: This component checks the current URL and displays the component associated with that exact path. All routes are placed within the switch components.
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:
page1.jspage2.jspage3.js
page1.js
page2.js
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 cssimport "./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:
Picked
React-Questions
ReactJS DOM Elements
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to set background images in ReactJS ?
How to create a table in ReactJS ?
How to navigate on path by button click in react router ?
How to create a multi-page website using React.js ?
ReactJS useNavigate() Hook
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
Difference between var, let and const keywords in JavaScript