React-router-dom 6 for beginners

React router dom is a library that allows you to handle routing in your React web applications. Routing is the process of matching the URL of the browser to the corresponding component or page that should be rendered. React router dom provides a declarative and flexible way to define your routes using components.

Installing React router dom

# using npm
npm install react-router-dom

# using yarn
yarn add react-router-dom

Importing React Router DOM

To use React Router DOM in your code, you need to import the components and hooks that you need from the library. For example, if you want to use the BrowserRouter, Routes, Route, Link, and useNavigate in your code, you can import them like this:

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

All of the above are Named Exports,

Creating Routes

The first thing you need to do is to create a browser router and wrap your app with it. The browser router is a component that uses the HTML5 history API to keep your UI in sync with the URL. To create routes in your application, you need to use the Routes and Route components. The Routes component is a container for all your routes, and the Route component defines a single route with a path and an element. For example, if you want to create three routes for your home page, about page, and contact page, you can do something like this:

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
        <Route path="/contact" element={<ContactPage />} />
      </Routes>
    </BrowserRouter>
  );
}

The path prop of the Route component specifies the URL pattern that matches the route. The element prop of the Route component specifies the component that renders when the route matches. The BrowserRouter component is a wrapper that provides the history API for navigation.

Creating Links

To create links in your application, you need to use the Link component. The Link component is a wrapper for the <a> tag that prevents the default browser behavior of reloading the page when clicking on a link. It also updates the URL and navigates to the corresponding route. For example, if you want to create a navigation bar with links to your home page, about page, and contact page, you can do something like this:

function NavBar() {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/contact">Contact</Link>
        </li>
      </ul>
    </nav>
  );
}

Navigating Programmatically

To navigate programmatically in your application, you need to use the useNavigate hook. The useNavigate hook returns a function that allows you to navigate to a specific URL or go back or forward in the history stack. For example, if you want to create a button that navigates to the contact page when clicked, you can do something like this:

function ContactButton() {
  let navigate = useNavigate();
  return (
    <button onClick={() => navigate("/contact")}>
      Go to Contact Page
    </button>
  );
}