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 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.js
- page2.js
- 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 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.
Javascript
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";// Import the pagesimport 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).
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:
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.
