In this article, we will discuss Routing module in React which is React router. We do not have any default routing available with the create-react-app command so we have to use an external module for it.
What is React Router?
React Router is a standard library for routing in React. It enables the navigation among views of various components in a React Application, allows changing the browser URL, and keeps the UI in sync with the URL. Let us create a simple application to React to understand how the React Router works. The application will contain three components the home component, about component, and contact component. We will use React Router to navigate between these components.
Installing React Router
To install react-router in your application write the following command in your terminal
// Installing
npm i react-router-dom
Importing React Router
// Importing
import { BrowserRouter, Routes, Route } from "react-router-dom";
React Router Components:
The Main Components of React Router are:
- BrowserRouter: BrowserRouter is a router implementation that uses the HTML5 history API(pushState, replaceState, and the popstate event) to keep your UI in sync with the URL. It is the parent component that is used to store all of the other components.
- Routes: It’s a new component introduced in the v6 and an upgrade of the component. The main advantages of Routes over Switch are:
- Relative s and s
- Routes are chosen based on the best match instead of being traversed in order.
- Route: Route is the conditionally shown component that renders some UI when its path matches the current URL.
- Link: The link component is used to create links to different routes and implement navigation around the application. It works like an HTML anchor tag.
Implementing React Router
To use React Router, let us first create a few components in the React application. In your project directory, create a folder named component inside the src folder and now add 3 files named.
- home.js
- about.js
- contact.js
Note: Remove the default styling provided with App.css
Let us add some code to our 3 components:
Javascript
// Home.js import React from 'react'; function Home (){ return <h1>Welcome to the world of Geeks!</h1> } export default Home; |
Javascript
// About.js import React from 'react'; function About () { return <div> <h2>neveropen is a computer science portal for neveropen!</h2> Read more about us at : https://www.geeksforgeeks.org/about/ </a> </div> } export default About; |
Javascript
// Contact.js import React from 'react'; function Contact (){ return <address> You can find us here:<br /> neveropen<br /> 5th & 6th Floor, Royal Kapsons, A- 118, <br /> Sector- 136, Noida, Uttar Pradesh (201305) </address> } export default Contact; |
Now, let us include React Router components to the application:
After adding all the components here is our complete source code:
javascript
import React, { Component } from 'react'; import { BrowserRouter as Router,Routes, Route, Link } from 'react-router-dom'; import Home from './component/home'; import About from './component/about'; import Contact from './component/contact'; import './App.css'; class App extends Component { render() { return ( <Router> <div className="App"> <ul className="App-header"> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About Us</Link> </li> <li> <Link to="/contact">Contact Us</Link> </li> </ul> <Routes> <Route exact path='/' element={< Home />}></Route> <Route exact path='/about' element={< About />}></Route> <Route exact path='/contact' element={< Contact />}></Route> </Routes> </div> </Router> ); } } export default App; |
Output: Now, we you can click on the links and navigate to different components. React Router keeps your application UI in sync with the URL.
Finally, we have successfully implemented navigation in our React application using React Router.
