Reactstrap和React-router 4.0.0-beta.6 – 活跃

发布时间：2020-12-15 20:17:55 所属栏目：百科来源：网络整理

导读：我在教育项目中使用Reactstrap和React-router 4.0.0-beta.6,它位于带有自定义域的gitlab上. 根据Reactstrap文档：这是我应该使用主动navlink的方式 import { NavLink } from 'reactstrap' ... NavLink href="#" active = true Link /NavLink 根据React-route

我在教育项目中使用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？

解决方法

要同时使用它们,您需要重命名其中一个导入并在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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!