What is react-router-dom ?
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:
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:
Add the following code to all the pages:
Project Structure: It will now look like the following.
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.
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).
Step to run the application: Open the terminal and type the following command.