Reactstrap 和 React-router 4.0.0-beta.6 - 活跃 <NavLink>

Question

我在带有自定义域的 gitlab 上的教育项目中使用 Reactstrap 和 React-router 4.0.0-beta.6。
根据 Reactstrap 文档：这就是我应该使用 active navlink

的方式

  import { NavLink } from 'reactstrap'
  ... 
  <NavLink href="#" active = true >Link< /NavLink>

根据 React-router v4 文档：

  import { NavLink } from 'react-router-dom'
  ...
  <NavLink to="/about" activeClassName="active">About</NavLink>

那么我应该如何实现navlink active state和使用react-router呢？

Answer 1

要同时使用两者，您需要重命名其中一个导入并在 reactstrap NavLink 中使用 tag 属性。您将无法在 reactstrap NavLink 上使用 active 道具，因为该逻辑存在于 react router NavLink 中。

它应该是这样的：

import { NavLink } from 'reactstrap';
import { NavLink as RRNavLink } from 'react-router-dom';

<NavLink to="/about" activeClassName="active" tag={RRNavLink}>About</NavLink>

更多信息在这里：https://github.com/reactstrap/reactstrap/issues/336

Answer 2

默认使用active class。您可以简单地使用 exact 布尔值属性来匹配确切的路径。

import { NavLink } from 'reactstrap';
import { NavLink as RRNavLink } from 'react-router-dom';

<NavLink exact to="/about" tag={RRNavLink}>About</NavLink>

看看react-router.NavLink组件的源码：https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/NavLink.js

Answer 3

我的建议是在使用 React Router v4 和 Reactstrap (Bootstrap) 时避免同时使用 <Link>、<NavLink> 和 tag。我真的认为这三个都应该被弃用，尤其是 tag 属性。尝试将 React Router 的 <Link> 和 <NavLink> 混入 Reactstrap 组件会导致 Bootstrap（例如：https://github.com/reactstrap/reactstrap/issues/562）出现无法预料的样式问题。

我发现从样式的角度来看，最好使用 React Router v4 <Route> 组件，并将 history prop 传递给 Reactstrap 组件。

import { Route } from 'react-router-dom';
import { Button } from 'reactstrap';

<Route
  render={props =>
    <Button role="button"
      onClick={() => props.history.push("/endpoint")}>
    </Button>}
  />

Answer 4

由于您正在使用 reactstrap 来处理导航栏的样式，因此您不需要也不应该依赖 react-router 中的 NavLink 来做同样的事情。

您可以改用 react-router 中的 Link，它只处理路由，选择时不添加 'active' 类名。但这没关系，因为 bootstrap 的 NavLink 会为您设计样式。

 import { NavLink } from 'reactstrap';
 import { Link } from 'react-router-dom';

 <NavLink><Link to="/about">About</Link></NavLink>

Answer 5

我使用这样的东西：

<NavLink to="/about" active={window.location.hash === '/about'}>About</NavLink>

Answer 6

我有 exact prop in react-router 4.3.1 route 但还需要添加 exact to reactstrap 7.0.2 NavLink 以防止基本路由在所有其他子路由中显示为活动状态。

import { Link, NavLink as RRNavLink, withRouter } from "react-router-dom";
import { NavItem, NavLink } from "reactstrap";

<NavItem>
  <NavLink to="/" activeClassName="active" exact tag={RRNavLink}>
    Home
  </NavLink>
</NavItem>
<NavItem>
  <NavLink to="/some-route" activeClassName="active" tag={RRNavLink}>
    Some Text
  </NavLink>
</NavItem>

Reactstrap 和 React-router 4.0.0-beta.6 - 活跃 <NavLink>

Reactstrap and React-router 4.0.0-beta.6 - active <NavLink>

react-router

reactstrap