'Replacing <a> with <Link> breaks my NavBar

I have this bootstrap NavBar that works perfectly with "a", but when I try to replace the "a" with "Link" from React it pretty much breaks the app, the Navbar stops showing. Is it because of the Bootstrap? I saw a video from youtube that this works, maybe with newer versions this doesn't work?

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

<nav className="navbar navbar-expand-lg navbar-light bg-light">
    <div className="container-fluid">
      <div>
        <img width="100" src="/assets/images/logo.jpg"></img>
      </div>
      <button
        className="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span className="navbar-toggler-icon"></span>
      </button>
      <div className="collapse navbar-collapse" id="navbarSupportedContent">
        <ul className="navbar-nav me-auto mb-2 mb-lg-0">
          <li className="nav-item">
            <Link className="nav-link" to="/">Home</Link>   <----------------here for ex.
          </li>
          <li className="nav-item">
            <a className="nav-link active" aria-current="page" href="#">
              Productos
            </a>
          </li>
          <li className="nav-item">
            <a className="nav-link active" aria-current="page" href="#">
              Nosotros
            </a>
          </li>
          <li className="nav-item">
            <a className="nav-link active" aria-current="page" href="#">
              Contacto
            </a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
reactjsbootstrap-4navbar


Solution 1:[1]

Judging from the href attribute in your <a> components, I believe you are trying to access a component on the same page using hashes.

Link from react-router-dom does not actually support this feature from what I know. Instead, I suggest installing react-router-hash-link which supports it.

The import can look like

import { HashLink as Link } from 'react-router-hash-link';

And you can have the same component attributes

<li className="nav-item">
  <Link className="nav-link active" aria-current="page" to="/#productos">
    Productos
  </Link>
</li>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 xzyio

Related Questions