Reactjs 带有react引导NavItem和react路由器的外部链路

所以，我是新手

对于使用react路由器的应用程序，我尝试使用react引导的NavItem创建外部链接。选中时，NavItem不会将我带到其href属性中定义的地址。将鼠标悬停在上方时，地址将显示在浏览器中

据我所知，导航路线需要使用Link/LinkContainer组件，但不能用于外部链接

如何实现与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>

---

我也有这个问题。一般来说，NavItems似乎有很多问题。我的解决方法是只使用标记，而不使用标记，因为href似乎根本不起作用，对于外部URL也不起作用

需要注意的是，当您将标签放入时，控制台中会出现一个关于未知道具（如active等）的警告。为了解决这个问题，我只需将带有外部链接的标签放入外部，并使用自定义样式

我的例子是：

  <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>

---

类似的问题。我就是这样解决的

在您的案例中，我刚刚向MenuItem NavItem添加了一个onClick事件，然后触发了window.openexternalur。对我来说很有用

<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>

---

我试着在我的项目中将外部链接放在NavItem的href下，效果很好。你介意我看看你的用法吗？

openExternalURL() {
  window.open(someURL)
}