Question

所以，我是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>

Answer 1

我也有这个问题。一般来说，NavItems似乎存在很多问题。我的工作只是使用<a>标记而不使用<NavItem>，因为href似乎根本不起作用，<LinkContainer>不适用于外部网址。

需要注意的是，当您将<a>标记放入<Nav>时，它会在控制台中显示有关“活动”等未知道具的警告等。要解决此问题< / em>我只是将<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>

Answer 2

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

我刚刚将一个onClick事件添加到MenuItem（在你的情况下为NavItem），然后触发了一个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)
}

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

2 个答案: