Bootstrap 4 NavBar with React <Link/> component

Question

I'm trying to build a Bootstrap 4 NavBar that will use ReactJS <Link> component from react-router instead of the original <li> class.

Currently I'm having troubles building the component correctly, as at the end the ReactJS component has not the expected behaviour.

Let´s start from the original Bootstrap 4 NavBar example:

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

This is being migrated to a ReactJS component as the following:

import React from 'react';
import Link from 'react-router-dom/Link';

function Menu() {
  return (
    <div>
        <nav className="navbar navbar-toggleable-md navbar-light bg-faded">
          <button className="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span className="navbar-toggler-icon"></span>
          </button>
          <a className="navbar-brand" href="#">Navbar</a>

          <div className="collapse navbar-collapse" id="navbarSupportedContent">
            <ul className="navbar-nav mr-auto">
              <span className="nav-item active">
                <Link className="nav-link" to="/">Home <span className="sr-only">(current)</span></Link>
              </span>
              <span className="nav-item">
                <Link className="nav-link" to="/counter">Counter</Link>
              </span>
              <span className="nav-item">
                <Link className="nav-link disabled" to="/about">About</Link>
              </span>
            </ul>
            <form className="form-inline my-2 my-lg-0">
              <input className="form-control mr-sm-2" type="text" placeholder="Search" />
              <button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
          </div>
        </nav>
    </div>
  );
}

export default Menu;

Altough it runs, many of the formatting is lost and some features like "nav-link disabled" are not working (you can click on About and it goes to the desired page).

I'm sure I'm doing the conversion wrong. How can I fix the component code so that to reflect correctly the original behaviour without React?

Answer 1

For this particular use case, there's an easy solution.

Simply add this to your css:

.nav-link.disabled { pointer-events: none }.

That said, I'd strongly recommend to use a library of bootstrap-based react components on the long term. I personally like https://reactstrap.github.io/.