ReactJS - Routing

In web application, Routing is a process of binding a web URL to a specific resource in the web application. In React, it is binding an URL to a component. React does not support routing natively as it is basically an user interface library. React community provides many third party component to handle routing in the React application. Let us learn React Router, a top choice routing library for React application.

Install React Router

Let us learn how to install React Router component in our Expense Manager application.

Open a command prompt and go to the root folder of our application.

cd /go/to/expense/manager

Install the react router using below command.

npm install react-router-dom --save

React Router

React router provides four components to manage navigation in React application.

Router − Router is th top level component. It encloses the entire application.

Link − Similar to anchor tag in html. It sets the target url along with reference text.

<Link to="/">Home</Link>

Here, to attribute is used to set the target url.

Route − Maps the target url to the component.

Nested Routing

React router supports nested routing as well. Let us understand nesting routing using the following example to create an application −

Home.jsx

import React from "react";
function Home() {
  return (
    <div className="Home">
      <h1>This is Home</h1>
    </div>
  );
}
export default Home;

About.jsx

import React from "react";
function About() {
  return (
    <div className="About">
      <h1>AboutUs</h1>
      <p>tutorialspoint India</p>
    </div>
  );
}
export default About;

Contact.jsx

import React from "react";
function Contact() {
  return (
    <div className="Contact">
      <h1>Contact-Us</h1>
      <p>
        Tutorials Point India Private Limited, 4th Floor, Incor9 Building, Plot
        No: 283/A, Kavuri Hills, Madhapur, Hyderabad, Telangana, INDIA-500081
      </p>
    </div>
  );
}
export default Contact;

Creating navigation

Let us introduce navigation among the components we created above. The minimum screens of the application are given below −

  • Home screen − Landing or initial screen of the application

  • About − Shows the description of the application

  • Contact − Contains contact information

The following full code of Navigate.jsx file will contain the links from one component to another. It will establish links from the landing page to other components.

Navigate.jsx

import React from "react";
import { Outlet, Link } from "react-router-dom";

function Navigate() {
  return (
    <div>
      <ul style={{ listStyle: "none" }}>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About-Us</Link>
        </li>
        <li>
          <Link to="/contact">Contact-Us</Link>
        </li>
      </ul>

      <Outlet />
    </div>
  );
}
export default Navigate;

Next, create a file, App.js under src/components folder and start editing. The purpose of the App component is to handle all the screen in one component. It will configure routing and enable navigation to all other components.

We import the React library and other components of the application to App.jsx. Instead of Switch, in the latest version of React, we only use the <Route> tag. This is where nested routing takes place.

App.jsx

import { Route, Routes, BrowserRouter } from "react-router-dom";
import "./App.css"
import Home from "./Router/Home";
import About from "./Router/About";
import Contact from "./Router/Contact";
import Navigate from "./Router/Navigate";
function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Navigate />}>
            <Route index element={<Home />} />

            <Route path="About" element={<About />} />

            <Route path="Contact" element={<Contact />} />
          </Route>
        </Routes>
      </BrowserRouter>
    </div>
  );
}
export default App;

Next, serve the application using npm command.

npm start

Next, open the browser and enter http://localhost:3000 in the address bar and press enter.

Try to navigate the links and confirm that the routing is working.

Navigate Links

Advantages of React Router

Following are the list of advantages of React Routing −

  • Routing between components becomes faster if the amount of data that renders is less.

  • Implementing animations and transitions when switching between different components becomes easier. This provides a better user experience.

  • Allows nagivation without refreshing the page as it allows single page web or mobile applications.

Advertisements