[React] react-router-dom

[mahfujul-helios]

react-router-dom

What is react-router-dom ?

react-router-dom is a JavaScript library used for handling routing in React applications. It's a part of the react-router family, which provides routing capabilities for React applications. Specifically, react-router-dom is tailored for web applications built with React that run in the browser.

How it's work ?

react-router-dom is a JavaScript library that facilitates routing in React applications. By providing a collection of components, hooks, and utilities, it simplifies the process of navigating between different views or components based on the URL. The core component of react-router-dom is , which wraps the application and enables client-side routing using the HTML5 history API. Developers define routes using components, specifying the URL path and the component to render when the path matches. Navigation is handled with components like and , which create anchor tags with appropriate href attributes. Dynamic routing, parameter extraction, and programmatic navigation are supported, allowing for flexible and dynamic routing behavior. With react-router-dom, developers can easily implement complex routing logic, nested routes, and navigation flows, making it a cornerstone library for building modern single-page applications with React.

Steps to Use React Router

1. install react-router-dom

npm i react-router-dom

2. Importing React Router

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

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.

// 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;

now last

npm start

now you can see the output http://localhost:3000/. in this url.

conclusion

react-router-dom is an essential tool for managing routing in React applications. It simplifies the implementation of client-side navigation, providing a declarative API and a range of components and hooks for defining routes, handling navigation, and managing dynamic routing scenarios. By enabling developers to create nested routes, handle dynamic parameters, and navigate programmatically, react-router-dom empowers the creation of complex, interactive user interfaces with seamless navigation between different views. With its robust features and straightforward integration with React applications, react-router-dom has become a fundamental library for building modern web applications that offer a smooth and intuitive user experience.