External link with react-bootstrap NavItem and react-router

Question

So, I'm new to ReactJS.

For an app using react-router, I am attempting to create an external link using react-bootstrap's NavItem. When selected, NavItem does not take me to the address defined in its href attribute. The address is displayed in the browser when hovering over.

To my understanding, navigating routes requires the usage of Link/LinkContainer components, but cannot be used for external links.

How do I accomplish external links with NavItems?

<Navbar inverse collapseOnSelect>
  <Navbar.Header>
      <Link to="/" className="navbar-brand">Tlmader</Link>
  </Navbar.Header>
  <Navbar.Collapse>
    <Nav>
      <LinkContainer to="/about">
        <NavItem>About</NavItem>
      </LinkContainer>
      <LinkContainer to="/projects">
        <NavItem>Projects</NavItem>
      </LinkContainer>
      <LinkContainer to="/photos">
        <NavItem>Photos</NavItem>
      </LinkContainer>
    </Nav>
    <Nav pullRight>
      <NavItem href="https://github.com/tlmader">GitHub</NavItem>
      <NavItem href="#">Link Right</NavItem>
    </Nav>
  </Navbar.Collapse>
</Navbar>

Answer 1

I had this problem too. There seems to be a lot of issues with NavItems in general. My work around was just using an <a> tag and not using a <NavItem>, as the href doesn't seem to work at all, and the <LinkContainer> doesn't work for external URLs.

Something to note, when you put the <a> tag in the <Nav> it comes up with a warning in the console about unknown props like "active" etc. To work around this I just put the <a> tag with the external link outside the <Nav> and used custom styles.

My example:

  <Navbar className="header-menu" collapseOnSelect>
     <Navbar.Header>
       <Navbar.Brand>
         <a className="logo" href="#">
           Brand
         </a>
       </Navbar.Brand>
       <Navbar.Toggle />
     </Navbar.Header>
     <Navbar.Collapse>
       <Nav>
         <LinkContainer to='/products/'>
           <NavItem className="nav-link">Products</NavItem>
         </LinkContainer>
         <LinkContainer to='/about/'>
           <NavItem className="nav-link">About</NavItem>
         </LinkContainer>
         <LinkContainer to='/how-to-use/'>
           <NavItem className="nav-link">How to Use</NavItem>
         </LinkContainer>
       </Nav>
       <Nav pullRight>
         <NavItem>
           <FaShoppingCart className='cart-button' />
         </NavItem>
       </Nav>
       <a className="custom-style" href="https://www.facebook.com">
          <FaFacebookSquare className='fb-button' />
       </a>
     </Navbar.Collapse>
  </Navbar>

Answer 2

Similar problem. This is how I tackled it.

I just added an onClick event to the MenuItem (NavItem in your case) that then triggered a window.open(externalURL). Worked great for me

<NavDropdown
  <MenuItem
    header
    className='text-uppercase hidden-xs'
  >
    <strong className='text-gray-lighter'>
      Account
    </strong>
  </MenuItem>
  <MenuItem divider className='hidden-xs'/>
  <LinkContainer to='/dashboard'>
    <MenuItem eventKey={3.1}>Home</MenuItem>
  </LinkContainer>
  <LinkContainer to='/dashboard/user-profile'>
    <MenuItem eventKey={3.2}>Profile</MenuItem>
  </LinkContainer>
  <LinkContainer to='/dashboard/account-settings'>
    <MenuItem eventKey={3.3}>Account</MenuItem>
  </LinkContainer>
  <LinkContainer to='/dashboard/privacy'>
    <MenuItem eventKey={3.4}>Privacy</MenuItem>
  </LinkContainer>
  <MenuItem onClick={this.openExternalURL} eventKey={3.5}>FAQ</MenuItem>
  <MenuItem divider />
  <LinkContainer to='/login'>
    <MenuItem onClick={this.handleLogout} eventKey={3.6}>Sign Out</MenuItem>
  </LinkContainer>
</NavDropdown>

my class function:

openExternalURL() {
  window.open(someURL)
}