Sometimes, we want to make React Bootstrap Navbar and React Router work together.
In this article, we’ll look at how to make React Bootstrap Navbar and React Router work together.
How to make React Bootstrap Navbar and React Router work together?
To make React Bootstrap Navbar and React Router work together, we can add the as prop to the Nav.Link component.
For instance, we write
<Nav defaultActiveKey="/bills" as="ul">
<Nav.Item as="li">
<Nav.Link as={NavLink} to="/bills">
Bills
</Nav.Link>
</Nav.Item>
<Nav.Item as="li">
<Nav.Link as={NavLink} to="/other">
Other
</Nav.Link>
</Nav.Item>
</Nav>
to render Nav.Libk as a React Router NavLink by setting the as prop to NavLink.
The to prop takes a URL path string just like the React Router to prop.
Conclusion
To make React Bootstrap Navbar and React Router work together, we can add the as prop to the Nav.Link component.
