React Application navigating with ‘react-router-dom’

Introduction on ‘react-router-dom’ Package

‘react-router-dom’ is the React binding for react-router, a library that enables dynamic routing in web applications. It allows you to declaratively define routes and manage navigation within your React application.

Installing react-router-dom

npm install react-router-dom
# or
yarn add react-router-dom.

Key Components and Hooks in ‘react-router-dom’

1. BrowserRouter

// The BrowserRouter component is a wrapper that uses the HTML5,
// history API (pushState, replaceState, and the popstate event),
// to keep your UI in sync with the URL.

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

const Home = () => <h1>Home</h1>;
const About = () => <h1>About</h1>;

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
};

export default App;

2. Routes and Route

// The Routes component is used to group multiple Route components.
//The Route component defines a mapping between a URL path and a component.

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

const Home = () => <h1>Home</h1>;
const About = () => <h1>About</h1>;

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
};

export default App;

3. Link

// The Link component is used to create navigable links in your application,
//similar to the HTML <a> element but with the benefit of not causing
//a full page reload.

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

const Home = () => <h1>Home</h1>;
const About = () => <h1>About</h1>;

const App = () => {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
};

export default App;

4. useNavigate

//The useNavigate hook is used for programmatic navigation. 
//It returns a function that lets you navigate to different routes.

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

const Home = () => {
  const navigate = useNavigate();

  const goToAbout = () => {
    navigate('/about');
  };

  return (
    <div>
      <h1>Home</h1>
      <button onClick={goToAbout}>Go to About</button>
    </div>
  );
};

const About = () => <h1>About</h1>;

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
};

export default App;

5. useParams

//The useParams hook is used to access URL parameters. It returns an object
//of key/value pairs of the dynamic params from the current URL.

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

const User = () => {
  const { id } = useParams();
  return <h1>User ID: {id}</h1>;
};

const App = () => {
  return (
    <Router>
      <nav>
        <Link to="/user/1">User 1</Link>
        <Link to="/user/2">User 2</Link>
      </nav>
      <Routes>
        <Route path="/user/:id" element={<User />} />
      </Routes>
    </Router>
  );
};

export default App;

So in that case react-router-dom is an essential library for managing navigation in React applications. By using components like BrowserRouter, Routes, Route, and hooks like useNavigate and useParams, you can easily define routes, create navigable links, and manage dynamic URLs. Understanding and leveraging these tools will enable you to build robust and user-friendly single-page applications with React.