Question

我想使用React Router在我的网站上包含一个非常基本的导航栏，但是样式或路线会根据我的更改而弄乱。

在这里说要使用Navbar，Nav和Nav.Link https://react-bootstrap.github.io/components/navs/#nav-link-props，所以我想使用它们。

问题是，在我看来，Nav.Link需要href属性将用户发送到该路由，例如/ One。但是，顶部的“一个”链接无法获得有效的样式。如果删除href属性，则在单击该链接时它将获得活动样式，但不会将用户发送到/ One或明显加载该路由所需的组件。

我没有看到使用这些标签的SO答案，只是使用Link和NavLink的答案（我链接的URL不使用）。该页面上也没有使用多个href属性的示例。我想念什么？下面是我的代码。

class Header extends Component {
  render() {
    return (
      <Navbar bg="light" variant="light" fixed="top">
        <Navbar.Brand href="#">MySite</Navbar.Brand>
        <Nav>
          <Nav.Link href="/" activeClassName="active" eventKey="/">Home</Nav.Link>
          <Nav.Link href="/one" activeClassName="active" eventKey="/one">One</Nav.Link>
          <Nav.Link href="/two" activeClassName="active" eventKey="/two">Two</Nav.Link>
        </Nav>
      </Navbar>
    )
  }
}

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <Route path="/" exact strict component={Redcircle} />
          <Route path="/one" exact strict component={Bluesquare} />
          <Route path="/two" exact strict component={Greentriangle} />
        </div>
        </Router>
    );
  }
}

预期结果：将url更改为/ one的Navbar，加载组件Bluesquare，并使Navbar中的单词One具有有效的样式实际结果：要么是路线荷载，要么是路线样式有效

Answer 1

您来自activeKey组件的missed Nav道具。只需通过路由器HOC

传递参数

UPD： activeClassName由react-router-dom组件提供，并且您可以看到Nav.Link具有active的支持，但它们之间没有任何关系。

解决问题的最简单方法是将当前路径传递到activeKey组件中的Nav道具，而您可能会从pathname道具的location字段中获得当前路径，由withRouter HOC提供。

UPD2：这是playground

Answer 2

像这样修改您的代码。它工作正常：

function Header()
{
    return(
        <Router>
        <div >
        <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
        <Navbar.Brand href="/" eventKey="/">React-Bootstrap</Navbar.Brand>
        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
        <Navbar.Collapse id="responsive-navbar-nav">
        <Nav className="mr-auto">
          <Nav.Link href="/footer" activeClassName="active" eventKey="/">About</Nav.Link>
          <Nav.Link href="/count" activeClassName="active" eventKey="/">Count</Nav.Link>

          <NavDropdown title="Dropdown" id="collasible-nav-dropdown">
            <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
            <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
            <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
            <NavDropdown.Divider />
            <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
          </NavDropdown>
        </Nav>
        <Nav>
          <Nav.Link href="#deets">More deets</Nav.Link>
          <Nav.Link eventKey={2} href="#memes">
            Dank memes
          </Nav.Link>
        </Nav>
        </Navbar.Collapse>
        </Navbar>
              </div>
              <Switch>
              <Route exact path='/'/>
                <Route path='/count' component={Count} />
                <Route path='/footer' component={Footer} />

              </Switch>
                </Router>
    );
}

如何使用Nav.Link和React Router在Navbar中设置活动链接？

2 个答案: