React : React Router Dom

React Router Dom is a popular library in the React ecosystem that provides routing capabilities for single-page applications (SPAs). It allows developers to handle navigation and URL management within their React applications. React Router Dom is built on top of the React Router library and specifically designed for web applications.

 

Key features and concepts of React Router Dom include:

 

• Declarative Routing: React Router Dom uses a declarative approach to define routes using React components. Developers can specify which component to render based on the current URL or route.

 

• Route Configuration: Developers define the routes and their corresponding components using the <Route> component. The route path and component are specified as props, allowing the router to match the current URL with the defined paths and render the appropriate component.

• Router Configuration: React Router Dom requires a single <BrowserRouter> component to be placed at the top of the component tree. It provides the routing context for the application and manages the history and location objects. Alternatively, <HashRouter> can be used to support routing in applications deployed on static servers.

• Navigation: React Router Dom provides various components for navigation, including <Link> and <NavLink>. These components allow developers to create links within their application, triggering navigation to different routes when clicked. The library also offers programmatic navigation through the history object, which allows developers to navigate programmatically in response to events or user interactions.

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

// Components for different routes
const Home = () => <h1>Home Page</h1>;
const About = () => <h1>About Page</h1>;
const Contact = () => <h1>Contact Page</h1>;

const App = () => {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>

      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
    </Router>
  );
};

export default App;

 

• Route Parameters: React Router Dom enables the use of dynamic route parameters, denoted by a colon (:) in the route path. These parameters can be extracted from the URL and accessed within the rendered component, providing flexibility for handling dynamic data and generating dynamic routes.

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

const User = ({ match }) => {
  const { id } = match.params; // Access the parameter value

  return <h1>User ID: {id}</h1>;
};

const App = () => {
  return (
    <Router>
      <Route path="/users/:id" component={User} />
    </Router>
  );
};

export default App;

• URL Parameters: In addition to route parameters, React Router Dom allows access to query parameters and hash fragments in the URL. These parameters can be accessed and utilized within the component for various purposes, such as filtering data or configuring behavior.

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

const Product = ({ match }) => {
  const { id } = match.params;
  const queryParams = new URLSearchParams(window.location.search);
  const category = queryParams.get('category');

  return (
    <div>
      <h1>Product ID: {id}</h1>
      <p>Category: {category}</p>
    </div>
  );
};

const App = () => {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/products/123?category=electronics">Product 123</Link>
          </li>
          <li>
            <Link to="/products/456?category=books">Product 456</Link>
          </li>
        </ul>
      </nav>

      <Route path="/products/:id" component={Product} />
    </Router>
  );
};

export default App;

 

React Router Dom has gained popularity due to its flexibility, ease of use, and seamless integration with React applications. It enables developers to create dynamic, navigable web applications with a clean and organized approach to handling routes and URLs. It is widely used in React projects, ranging from small personal projects to large-scale enterprise applications.