react-router - Reactstrap 和 React-router 4.0.0-beta.6 - 事件

Question

我在位于具有自定义域的 gitlab 上的教育项目中使用 Reactstrap 和 React-router 4.0.0-beta.6。
根据 Reactstrap 文档:这就是我应该使用 active 的方式导航链接

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

Answer 1

要同时使用两者，您需要重命名其中一个导入并使用 reactstrap NavLink 中的标签 Prop 。您将无法在 reactstrap NavLink 上使用 active prop，因为该逻辑存在于 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