8

I'm using Reactstrap and React-router 4.0.0-beta.6 in the educational project that is located on gitlab with custom domain.
According to Reactstrap docs: that's the way I should use active navlink 

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

According to React-router v4 docs: 

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

So how should I do implement navlink active state and use react-router?

4

6 回答 6

18

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

于 2017-02-21T17:16:53.533 回答
4

默认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

于 2017-09-03T09:46:07.380 回答
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>
于 2018-03-17T20:17:30.867 回答
1

我的建议是在使用 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>组件，并将historyprop 传递给 Reactstrap 组件。

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

<Route
  render={props =>
    <Button role="button"
      onClick={() => props.history.push("/endpoint")}>
    </Button>}
  />
于 2017-09-03T11:54:40.103 回答
1

我使用这样的东西：

<NavLink to="/about" active={window.location.hash === '/about'}>About</NavLink>
于 2018-05-25T18:21:01.530 回答
0

我有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>
于 2019-01-12T06:57:50.593 回答