After setting up basic routing, implementing lazy loading, and adding fallback components, the next essential step is to provide users with the means to navigate through the pages of our app.

React Router provides the Link and NavLink components, analogs to the HTML a tag. These components enable us to update the URL in the browser address bar without reloading the entire page.

import { Link } from "react-router-dom";

<Link to="path_value">Any text</Link>

• The to prop specifies the target route or path that the link should navigate to. Replace path_value with the path you want the link to;
• Any text is the content that will be displayed as the link. You can replace it with the desired text or JSX content.

Example

Let's create a separate component called Bar to handle the navigation for the entire app. Here's the code:

const Bar = () => {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/contacts">Contacts</Link>
        </li>
      </ul>
      <hr />
    </nav>
  );
};

This code defines a functional component called Bar, which represents a navigation bar. It renders a <nav> element containing an unordered list <ul> with three list items <li>. Each list item includes a Link component from the react-router-dom library.

• Line 6: The first Link component represents a link to the "Home" page;
• Line 9: The second Link component represents a link to the "About" page;
• Line 12: The third Link component represents a link to the "Contacts" page.

These Link components enable navigation within the application by updating the URL in the browser address bar without reloading the page. When a user clicks on a link, the corresponding route or path is activated, and the associated component will be rendered.