Reactstrap 和 React-router 4.0.0-beta.6 - 活动 <NavLink>答案

【问题标题】：Reactstrap and React-router 4.0.0-beta.6 - active <NavLink>Reactstrap 和 React-router 4.0.0-beta.6 - 活动 <NavLink>
【发布时间】：2017-07-11 08:42:01
【问题描述】：

我在位于具有自定义域的 gitlab 上的教育项目中使用 Reactstrap 和 React-router 4.0.0-beta.6。
根据 Reactstrap 文档：这就是我应该使用主动 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 活动状态并使用 react-router？

【问题讨论】：

你可以更新标签以使用 reactstrap 而不是 react-bootstrap
@eddywashere 我试过了，但创建新标签“reactstrap”需要至少 1500 名声望。尝试从现有标签列表中取而代之”
很高兴知道，谢谢！

标签： react-router reactstrap

【解决方案1】：

要同时使用两者，您需要重命名其中一个导入并在 reactstrap NavLink 中使用 tag 属性。您将无法在 reactstrap NavLink 上使用 active 道具，因为该逻辑存在于 react 路由器 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

【讨论】：

很好，但是我有一个问题：如何改变reactstrap NavbarBrand的active样式？在 NavbarBrand 中没有活动的属性。 <NavbarBrand tag={RRNavLink} to="/" activeClassName="active-brand"> <i className="fa fa-id-card-o fa-lg px-2"></i> <span className="nav-bar navbar-brand">APP</span> </NavbarBrand>

【解决方案2】：

默认使用active 类。您可以简单地使用 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

【讨论】：

【解决方案3】：

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

您可以使用 react-router 中的 Link 代替，它只处理路由，并且在选择时不添加“活动”类名。不过没关系，因为 bootstrap 的 NavLink 会为你做造型。

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

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

【讨论】：

是的，就是这个
我相信这会给出错误：Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.

【解决方案4】：

我的建议是在使用 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 属性传递给 Reactstrap 组件。

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

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

【讨论】：

【解决方案5】：

我用这样的东西：

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

【讨论】：

【解决方案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>

【讨论】：