JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">

    <span class="navbar-text">&nbsp;</span>
    <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse collapse hide" id="navbarMenu">                     
        <ul class="navbar-nav">
            <li class="nav-item"><a href="#sec-1" class="nav-link">link 1</a></li>
            <li class="nav-item"><a href="#sec-2" class="nav-link">link 2</a></li>
            <li class="nav-item"><a href="#sec-3" class="nav-link">link 3</a></li>
        </ul>
    </div>
</nav>

JavaScript

$(document)
.on('click', '.navbar-nav>li>a', function(event){
   $('.navbar-collapse').collapse('hide');
	 window.location.href = $(event.currentTarget).attr('href');
   alert(window.location.href);
});