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

Question

我在教育项目中使用Reactstrap和React-router 4.0.0-beta.6,它位于带有自定义域的gitlab上.
根据Reactstrap文档:这是我应该使用主动navlink的方式

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

根据React-router v4 docs:

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

那么我应该如何实现navlink活动状态并使用react-router？

Answer 1

要同时使用它们,您需要重命名其中一个导入并在reactstrap NavLink中使用标记prop.您将无法在reactstrap NavLink上使用活动prop,因为该逻辑存在于反应路由器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