react-bootstrap navbar nav link refreshes page

To prevent the page from refreshing when clicking on a react-bootstrap navbar nav link, you can make use of the react-router-dom library. Here are the steps to achieve this:

1. Install the necessary packages by running the following command in your project directory:

npm install react-router-dom

1. Import the required components from react-router-dom in your Navbar component file:

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

1. Replace the href attribute of the <Nav.Link> component with the to attribute from react-router-dom. For example:

<Nav.Link as={Link} to="/your-route">Link Text</Nav.Link>

1. Wrap your entire application with the <BrowserRouter> component from react-router-dom in your main file (usually index.js):

import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

That's it! By following these steps, you should be able to use react-router-dom to navigate within your application without causing the page to refresh when clicking on the navbar links.