与 react-bootstrap NavItem 和 react-router 的外部链接答案

【问题标题】：External link with react-bootstrap NavItem and react-router与 react-bootstrap NavItem 和 react-router 的外部链接
【发布时间】：2017-06-11 15:47:12
【问题描述】：

所以，我是 ReactJS 的新手。

对于使用 react-router 的应用程序，我正在尝试使用 react-bootstrap 的 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>

【问题讨论】：

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

标签： reactjs react-router react-bootstrap

【解决方案1】：

我也有这个问题。一般而言，NavItems 似乎存在很多问题。我的解决方法只是使用<a> 标签而不使用<NavItem>，因为href 似乎根本不起作用，而<LinkContainer> 不适用于外部URL。

需要注意的是，当您将 <a> 标签放在 <Nav> 中时，它会在控制台中显示有关“活动”等未知道具的警告。要解决这个我只需将带有外部链接的<a> 标记放在<Nav> 之外并使用自定义样式。

我的例子：

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

【讨论】：

【解决方案2】：

类似的问题。这就是我解决它的方法。

我刚刚向 MenuItem（在您的情况下为 NavItem）添加了一个 onClick 事件，然后触发了 window.open(externalURL)。对我来说很好用

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

我的班级功能：

openExternalURL() {
  window.open(someURL)
}

【讨论】：