Routing In Reactjs

Hey readers, in this article we will be learning about what are routers in React and what is routing with an example. If you are new to React, check out the fundamental concept of React on codedamn.

What is React Router?

It is a standard library used for routing pages in React. It allows navigation in different views across various components in React application, changing URL in the browser and rendering UI according to Route. 

What is routing?

Routing is the path in which the client request or talks to application endpoints or the server.

Let’s take an example to understand the working of React Router. The application will have three-component, home, about, and contact, and React Router will be used for navigating between these components in the application.

Create React application by using the following command: npx create-react-app codedamn

Note: use the above command only if you have installed, create-react-app globally through npm else install it. 

The development environment is ready now, Let’s install React Router into the application. To install it, cd over to your project folder which is codedamn: cd codedamn

After this, install React Router using the following command: npm install –save react-router-dom

After installing React Router, add components of it to the React application.

The components of React Router are:

• Route- It renders component and UI conditionally whenever the path matches the URL
• Link- This component is used to create links for different routes and implementation of navigation around the React application. It works similar to that of the HTML anchor tag. 
• BrowserRouter- It is an implementation of a router that uses HTML5 API to keep the user interface in sync with the URL. It stores all the other components in an application. 
• Routes- It is a new component introduced in v6. The advantage of using this over Switch is that Instead of traverse order, the routes are chosen according to the match.

To add React Router to the application, open the project directory and go to the app.js file

import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link
} from 'react-router-dom';

In the src folder, create a components folder and add the following, home.js, about.js, and contact.js files.

Code of the home component:

import React from 'react';
function Home (){
  return <h1>Welcome to Codedamn!</h1>
}
export default Home;

Code of about component:

import React from 'react';
function About () {
return (
<div>
  <h2>Codedamn</h2>
  Read more about us at :
  <a href="https://codedamn.com//">
  https://codedamn.com/
  </a>
</div>
)}
export default About;

Code of contact component:

import React from 'react';
function Contact(){
return (
<address>
  You can find us here:<br />
  Flat 288, Rohini Sector 23, New Delhi - 110085, India
  +91-8329265590
  Email: [email protected]
</address>
)}
export default Contact;

Let’s include React Router in the application

BrowserRouter– Adding BrowserRouter as Router in-app file in order to wrap all the other components. The Router is a parent component which is why it can have only one child.

class App extends Component {
render() {
return (
<Router>
  <div className="App">
  </div>
</Router>
)}
}

Link– This allows us to create links in the components of an application. It uses the ‘to’ prop for the location of where the link should be given to navigate.

<div className="App">
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About Us</Link>
</li>
<li>
<Link to="/contact">Contact Us</Link>
</li>
</ul>
</div>

Now, run the application and open it in the browser. Wherever you click on the link, the URL changes according to the ‘to’ prop value of the given Link component.

Route– This component allows us to create a link between the UI of the component and the URL. The code given below depicts how to include Route in the application.

<Route exact path='/' element={<Home/>}></Route>
<Route exact path='/about' element={<About/>}></Route>
<Route exact path='/contact' element={<Contact/>}></Route>

This is how the components are linked. By clicking on any link, the linked component will be rendered in the application.

Now that we know what is Route component is, let’s deep dive into the props of the Route component.

• exact- This prop is used to match the exact value of the URL, for instance, exact path=’/contact’ will only render the component if it matches exactly with the syntax. If exact is removed, then it will render UI even if the URL is like ‘/contact/13’.
• path- It specifies the pathname that is assigned to the component.
• component- It is the component that will be rendered on the matching path.

The Route component, however renders more than one route so if we want to render only one component, routes are used in the application.

<Routes>
<Route exact path='/' element={<Home/>}></Route>
<Route exact path='/about' element={<About/>}></Route>
<Route exact path='/contact' element={<Contact/>}></Route>
</Routes>

Routes allow rendering a single component by wrapping all the routes inside the Routes component.

Conclusion

This was all about Routing in React.  Do let us know in the comment section if you have any queries. If you are interested in learning Reactjs, do check out courses on codedamn with an inbuilt environment/playground to learn and practice code. Join the community of codedamn and do check out other articles on programming and our YouTube channel for content related to programming languages and development at codedamn.