React-bootstrap: Link on Tabs

[Shadowman4205]

So how add link to tab?
i tried this on Tab.Container

<NavItem  href="https://www.google.com" eventKey="Google">Google</NavItem>

But nothing happened.

[jquense]

hi there, please look at the code for the examples on the docs site.

[Shadowman4205]

Hello,
I did, i used this

const tabsInstance = (
  <Tab.Container id="tabs-with-dropdown" defaultActiveKey="first">
    <Row className="clearfix">
      <Col sm={12}>
        <Nav bsStyle="tabs">
          <NavItem eventKey="first">
            Tab 1
          </NavItem>
          <NavItem eventKey="second">
            Tab 2
          </NavItem>
          <NavItem  href="https://www.google.com" eventKey="Google">Google</NavItem>
        </Nav>
      </Col>
      <Col sm={12}>
        <Tab.Content animation>
          <Tab.Pane eventKey="first">
            Tab 1 content
          </Tab.Pane>
          <Tab.Pane eventKey="second">
            Tab 2 content
          </Tab.Pane>
        </Tab.Content>
      </Col>
    </Row>
  </Tab.Container>
);

ReactDOM.render(tabsInstance, mountNode);

Are you refer on different example?

[huyvlam]

I experience the same issue. Tab.Container is rendering the <a href> inside <li class="tab"> but stop the click event from propagating. I used onSelect event to redirect to the href value, it worked but this solution is rather undesirable. What's the rationale for disabling href link? The component design here doesn't quite make sense.