Open In App

React Router

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

React Router, is your essential tool for building single-page applications (SPAs). Imagine users effortlessly transitioning between sections, experiencing your website like a fluid app and React Router makes it possible, paving the way for a delightful user experience and a modern web presence. A React website shouldn’t mean a Large page reloads every time users navigate. 

This article helps you to guide to the world of React Router and You’ll learn about the React Router concept, and its capabilities, Stay tuned to unlock the potential of smooth navigation and elevate your React projects to the next level!

As there is no inbuilt routing in React, the React JS Router enables routing support in React and navigation to different components in multi-page applications. It renders components for corresponding routes and assigned URLs.

What is a 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, the About component, and the contact component. We will use React Router to navigate between these components.

Steps to Use React Router

Step 1: Initialize a react project. Check this post for setting up React app

Step 2: Install react-router in your application write the following command in your terminal

npm i react-router-dom

Step 3: Importing React Router

import { BrowserRouter, Routes, Route } from "react-router-dom";

Folder Structure:

directory_structure

The updated dependencies in package.json file.

"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.22.1",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},

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

Example: This example shows navigation using react-router-dom to Home, About and Contact Components.

Javascript
// Filename - App.js

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
                            path="/"
                            element={<Home />}
                        ></Route>
                        <Route
                            path="/about"
                            element={<About />}
                        ></Route>
                        <Route
                            path="/contact"
                            element={<Contact />}
                        ></Route>
                    </Routes>
                </div>
            </Router>
        );
    }
}

export default App;
Javascript
// Filename - component/home.js

import React from "react";

function Home() {
    return <h1>Welcome to the world of Geeks!</h1>;
}

export default Home;
Javascript
// Filename - component/about.js

import React from "react";

function About() {
    return (
        <div>
            <h2>
                GeeksforGeeks is a computer science portal
                for geeks!
            </h2>
            Read more about us at :
            <a href="https://www.geeksforgeeks.org/about/">
                https://www.geeksforgeeks.org/about/
            </a>
        </div>
    );
}
export default About;
Javascript
// Filename - component/contact.js

import React from "react";

function Contact() {
    return (
        <address>
            You can find us here:
            <br />
            GeeksforGeeks
            <br />
            5th & 6th Floor, Royal Kapsons, A- 118, <br />
            Sector- 136, Noida, Uttar Pradesh (201305)
        </address>
    );
}

export default Contact;

Step to run the application: Open the terminal and type the following command.  

npm start

Output: Open the browser and our project is shown in the URL http://localhost:3000/. 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.



Last Updated : 15 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads