Search code examples
reactjsreact-bootstrap

react-bootstrap set external link without active

When I click on Google it opens in a new tab that's fine. But when I come back to my site, the link to Google is being set to active.

<Nav defaultActiveKey="1">
  <Nav.Link href="/home" eventKey="1">Home</Nav.Link>
  <Nav.Link href="https://google.com" target="_blank">Google</Nav.Link>
  <Nav.Link href="/service" eventKey="2">Service</Nav.Link>
</Nav>

How can I not apply active for external link like I have? If I move that link outside Nav it will be fine. But in my case, I have to put inside the Nav.

Solution

  • Looking at the documentation, you can set active to false:

    <Nav.Link href="https://google.com" target="_blank" active={false}>
  Google
</Nav.Link>