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

Posted 2023-03-23

【中文标题】Reactstrap 和 React-router 4.0.0-beta.6 - 活动 <NavLink>

【英文标题】：Reactstrap and React-router 4.0.0-beta.6 - active <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 名声望。尝试从现有标签列表中取而代之”

很高兴知道，谢谢！

【参考方案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>