NavItem active w/ LinkContainer

[pmcavoy89]

The problem is that the <LinkContainer /> has the prop activeKey but my NavItem has a prop for active true for both NavItems.

Example:

<Nav bsStyle="tabs" justified activeKey={selectedTab} onSelect={this.handleSelect}
  <LinkContainer to={'/page#item-1'}>
    <NavItem eventKey={1}>
      Item 1
    </NavItem>
  </LinkContainer>
  <LinkContainer to={'/page#item-2'}>
    <NavItem eventKey={2}>
      Item 2
    </NavItem>
  </LinkContainer>
</Nav>

Both <LinkContainer />s have the prop.activeKey of the selectedTab. Once I take the <LinkContainers /> off I get the active working properly. The thing is that it doesn't update my route then. I've also tried using the activeHref prop and that doesn't seem to help.

A hack that I've used to get around this issue was this;

<Nav bsStyle="tabs" justified activeKey={selectedTab} onSelect={this.handleSelect}
  <LinkContainer to={'/page#item-1'} active={selectedTab === 1 ? true : false}>
    <NavItem eventKey={1}>
      Item 1
    </NavItem>
  </LinkContainer>
  <LinkContainer to={'/page#item-2'} active={selectedTab === 2 ? true : false}>
    <NavItem eventKey={2}>
      Item 2
    </NavItem>
  </LinkContainer>
</Nav>

This seems a little hacky and I feel like the <LinkContainer /> is wrapping the <NavItem /> so that the <Nav /> can't grab the right component to calculate the activeKey. Or am I just missing something here?

[taion]

don't set eventKey on the <NavItem>s; <LinkContainer> manages everything for you there anyway

[pmcavoy89]

@taion So I tried using the activeHref prop on the <Nav> component and the href on the <NavItem> but that didn't work either. It just applied the active class to both <NavItem>.

[jquense]

I believe @taion is saying, don't use activeHref or any other active prop on the Nav. The linkContainer is the thing that owns setting the "active" state for the item.

[pmcavoy89]

@jquense Thanks for the advice. So I changed my code to look like this;

<Nav bsStyle="tabs" justified onSelect={this.handleSelect}>
  <IndexLinkContainer to={`section-1`}>
    <NavItem eventKey={1}>
      Event 1
    </NavItem>
  </IndexLinkContainer>
  <LinkContainer ... />
</Nav>

This is causing both <NavItem> components to be active for me. I removed the activeKey and activeHref, I kept the onSelect prop for changing views.

I also found this thread that mentions documentation for RRC? Does RRC stand for react-router-bootstrap? I'm trying to track down some better examples because closed issues didn't help me out too much.

[taion]

Don't use onSelect or eventKey if you're using link containers. The link containers will handle click and active state.

[pmcavoy89]

So it's keeping both active still in this example. Can we not do #/ids?

<Nav bsStyle="tabs" justified>
  <IndexLinkContainer to="/item#1">
    <NavItem>
      Item 1
    </NavItem>
  </IndexLinkContainer>
  <LinkContainer to="/item#2">
    <NavItem>
      Item 2
    </NavItem>
  </LinkContainer>
</Nav>

[taion]

That's how React Router active semantics work. They only look at the path.

[pmcavoy89]

So that's why I'm doing logic to look at the hash. So why can't we add that to react-router-bootstrap or do you think that's more an improvement better left to react-router?

I'm just thinking it makes sense to look at the hash as it is a representation of ids on a page. I think it keeps things like page navigation clean and simple.

[taion]

This package is just an integration. That sort of extra functionality doesn't belong here.

[syang]

@taion Jimmy, could you please post an example showing your idea? According to the three answers above, I have yet figured out how I should use this library as my navigation bar.

[pmcavoy89]

@syang My comment here a few posts up is the preferred way.

Edit: Though the #id will not work. So make it a unique path.

[ddelrio1986]

@pmcavoy89 I'm using URL hashes and I got it to work correctly by using exact on the LinkContainer.

[pmcavoy89]

@ddelrio1986 Can you provide an example? And what versions of react-router and react-router-bootstrap are you using?

[ghost]

@pmcavoy89 I'm using react-router-bootstrap v0.24.4 and react-router v4. It's works for me:
<LinkContainer exact to={your_link} />

[jainvizz]

@Susa70 Can you please provide the exact version of react-router, I am using 4.3.1 and it is not working for me.
Also can you please provide code snippet as well for the same.

[ddelrio1986]

@pmcavoy89 sorry I did not see your reply above before. I am searching for the example as I no longer have it and it is lost in the git history somewhere. I can confirm that I was using react-router 4.2.1 and react-router-bootstrap 0.24.4 at that time though.

[ddelrio1986]

Now I am using the IndexLinkContainer component a lot since it automatically includes the exact for me:

https://github.com/react-bootstrap/react-router-bootstrap/blob/master/src/IndexLinkContainer.js

[Maxim-Mazurok]

I had a similar issue. adding activeKey="/" to the <Nav /> solved it for me.

I had:

<LinkContainer to="/">
  Home Link
</LinkContainer>
<Nav activeKey="/">
  <LinkContainer to="/buy">
    <Nav.Link>buy</Nav.Link>
  </LinkContainer>
  <LinkContainer to="/rent">
    <Nav.Link>rent</Nav.Link>
  </LinkContainer>
</Nav>

so that my "/" link was outside of Nav element. IDK why activeKey did the trick for me, but maybe it'll help somebody..