How to set active link in Navbar using Nav.Link and React Router?

Question

I want to include a very basic Navbar on my site using React Router but either the styles or routes get messed up depending on what I change.

Here it says to use Navbar, Nav, and Nav.Link https://react-bootstrap.github.io/components/navs/#nav-link-props so I want to use these.

The problem is, it seems to me that the Nav.Link needs the href attribute to send the user to that route, for example /One. But then the One link at the top doesn't get active styles. If I remove the href attribute, it gets the active styles when I click on that link, but doesn't send the user to /One or load the component I want for that route obviously.

I don't see a SO answer about this that uses these tags, just answers using Link and NavLink which the URL I linked doesn't use. There isn't an example on that page either that uses multiple href attributes. What am I missing? Below is my code.

class Header extends Component {
  render() {
    return (
      <Navbar bg="light" variant="light" fixed="top">
        <Navbar.Brand href="#">MySite</Navbar.Brand>
        <Nav>
          <Nav.Link href="/" activeClassName="active" eventKey="/">Home</Nav.Link>
          <Nav.Link href="/one" activeClassName="active" eventKey="/one">One</Nav.Link>
          <Nav.Link href="/two" activeClassName="active" eventKey="/two">Two</Nav.Link>
        </Nav>
      </Navbar>
    )
  }
}

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <Route path="/" exact strict component={Redcircle} />
          <Route path="/one" exact strict component={Bluesquare} />
          <Route path="/two" exact strict component={Greentriangle} />
        </div>
        </Router>
    );
  }
}

Expected result: Navbar that changes url to /one, loads component Bluesquare, and makes the word One in the Navbar have active styles Actual result: Either route loads or One has active styles

Airat Zhanshuakov · Accepted Answer · 2019-02-10 18:16:47Z

12

You missed activeKey prop from Nav component. Just pass the param from router HOC

UPD: activeClassName provides by react-router-dom component, and as you can see Nav.Link has active prop, but there is no any relations between them.

The simplest way to resolve your issue is passing current path to activeKey prop in Nav component, and current path you may get from pathname field in location prop which provides by withRouterHOC.

UPD2: Here is playground

edited Feb 10, 2019 at 18:16

answered Feb 9, 2019 at 21:07

Airat Zhanshuakov

4566 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kevin Banas Over a year ago

I am really new to this...this is my first attempt at a react app. Could you explain by editing the code I shared? I got the <Nav activeKey="/"> part but not sure about the rest.

Kevin Banas Over a year ago

Thanks for the code sandbox. Marked your answer as correct since it works, but what I ended up doing was use HashRouter rather than BrowserRouter

B. Go · Accepted Answer · 2020-04-04 00:57:39Z

Modify your code like this.. It's working properly:

function Header()
{
    return(
        <Router>
        <div >
        <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
        <Navbar.Brand href="/" eventKey="/">React-Bootstrap</Navbar.Brand>
        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
        <Navbar.Collapse id="responsive-navbar-nav">
        <Nav className="mr-auto">
          <Nav.Link href="/footer" activeClassName="active" eventKey="/">About</Nav.Link>
          <Nav.Link href="/count" activeClassName="active" eventKey="/">Count</Nav.Link>

          <NavDropdown title="Dropdown" id="collasible-nav-dropdown">
            <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
            <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
            <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
            <NavDropdown.Divider />
            <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
          </NavDropdown>
        </Nav>
        <Nav>
          <Nav.Link href="#deets">More deets</Nav.Link>
          <Nav.Link eventKey={2} href="#memes">
            Dank memes
          </Nav.Link>
        </Nav>
        </Navbar.Collapse>
        </Navbar>
              </div>
              <Switch>
              <Route exact path='/'/>
                <Route path='/count' component={Count} />
                <Route path='/footer' component={Footer} />

              </Switch>
                </Router>
    );
}

Collectives™ on Stack Overflow

How to set active link in Navbar using Nav.Link and React Router?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related