Use React Router Link with Bootstrap

Today we will see a simple tutorial on how to use react-router Link with bootstrap. This is a simple tutorial but still, it’s useful because if we replace the Nav.Link tag or Navbar.Brand of react-bootstrap with Link tag of react-router it will remove the CSS associated with that Nav.Link. So let us see how to use that.

This tutorial requires you to have knowledge of implementing react-router and react-bootstrap in your react project. If you don’t have any idea then you can read my previous tutorial on How to use React Router in your React js project and Integrate bootstrap to your React js application

Requirements

• react-router-dom
• react-bootstrap
• react-router-bootstrap

1. I have created a basic react setup with three components header, service, and about.
2. After that created a route for home, service, and about.

3. Now open our header component and add the navbar from react-bootstrap. This is how it will look before any changes.

4. Now install the react-router-bootstrap.

yarn add react-router-bootstrap

5. Now import LinkContainer from react-router-bootstrap.

import {LinkContainer} from 'react-router-bootstrap'

6. Now wrap the react-bootstrap element you want to use with a Link tag like this.

<LinkContainer to="/service">
    <Nav.Link>Service</Nav.Link>
</LinkContainer>

So basically <Nav.Link>Service</Nav.Link> now becomes <LinkContainer to="/service"> <Nav.Link>Service</Nav.Link> </LinkContainer> same for Brand <Navbar.Brand href="/">React Bootstrap</Navbar.Brand> now becomes <LinkContainer to="/"> <Navbar.Brand>React Bootstrap</Navbar.Brand> </LinkContainer>

7. Here how it will look after changes in your header component.

8. Refresh your browser to see changes.

Below are the Github repository and live code for reference.

Mediumtutorial/react-router-link-bootstrap-medium