如何从React路由器向链接添加活动类？

Question

我使用创建一个bootstrap风格的侧边栏Link.这是我的代码片段:

<ul className="sidebar-menu">
  <li className="header">MAIN NAVIGATION</li>
  <li><Link to="dashboard"><i className="fa fa-dashboard"></i> <span>Dashboard</span></Link></li>
  <li><Link to="email_lists"><i className="fa fa-envelope-o"></i> <span>Email Lists</span></Link></li>
  <li><Link to="billing"><i className="fa fa-credit-card"></i> <span>Buy Verifications</span></Link></li>
</ul>

```

我想active在包装元素上设置活动路径的类<li>.我看到有其他的解决方案,在那里,展示了如何做到这一点kindof(使用反应路由器当前的路线有条件地设置活动类菜单上),但我不认为这是设置在一个包装的主动类的最佳方式Link.

我还发现了https://github.com/insin/react-router-active-component,但感觉它应该是不必要的.

在React Router中,这是可能的,还是需要使用外部解决方案？

Answer 1

在链接组件上,您现在可以添加activeClassName或设置activeStyle.

这些允许您轻松地将样式添加到当前活动的链接.

以前,您可以创建一个自定义组件,其作用类似于使用以下逻辑链接的包装器.

在名为nav_link.js的文件中

import React from 'react';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';

class NavLink extends React.Component {
    render() {
        var isActive = this.context.router.route.location.pathname === this.props.to;
        var className = isActive ? 'active' : '';

        return(
            <Link className={className} {...this.props}>
                {this.props.children}
            </Link>
        );
    }
}

NavLink.contextTypes = {
    router: PropTypes.object
};

export default NavLink;

并在组件中使用如下所示:

...
import NavLink from "./nav_link";
.....

<nav>
    <ul className="nav nav-pills pull-right">
        <NavLink to="/">
            <i className="glyphicon glyphicon-home"></i> <span>Home</span>
        </NavLink>
        <NavLink to="about">
            <i className="glyphicon glyphicon-camera"></i> <span>About</span>
        </NavLink>
    </ul>
</nav>

Answer 2

React-Router V4带有一个开箱即用的NavLink组件

要使用,只需将activeClassName属性设置为您已适当设置样式的类,或直接设置activeStyle为所需的样式.有关更多详细信息,请参阅文档.

<NavLink
  to="/hello"
  activeClassName="active"
>Hello</NavLink>

Answer 3

对我来说，有用的是使用 NavLink，因为它具有这个活动类属性。

1. 首先导入

   import { NavLink } from 'react-router-dom';
   

2. 使用 activeClassName 获取活动类属性。

   <NavLink to="/" activeClassName="active">
    Home
   </NavLink>
   
   <NavLink to="/store" activeClassName="active">
    Store
   </NavLink>
   
   <NavLink to="/about" activeClassName="active">
    About Us
   </NavLink>
   

3. 通过属性 active 在 css 中设置您的类的样式。

   .active{
     color:#fcfcfc;
    }
   

Answer 4

使用ES6更新答案:

import React, { Component } from 'react';
import { Link } from 'react-router'

class NavLink extends Component {
    render() {
        let isActive = this.context.router.isActive(this.props.to, true);
        let className = isActive ? "active" : "";

        return (
            <li className={className}>
                <Link {...this.props}/>
            </li>
        );
    }
}

NavLink.contextTypes = {
    router: React.PropTypes.object
};

export default NavLink;

然后如上所述使用它.

Answer 5

只需使用NavLink而不是Link. 它会.active自动添加类。

<Nav className="mr-auto">
    <Nav.Link as={NavLink} to="/home">Home</Nav.Link>
    <Nav.Link as={NavLink} to="/users">Users</Nav.Link>
</Nav>

Answer 6

我不喜欢创建自定义组件的想法,因为如果你有一个不同的包装元素,你将不得不创建另一个自定义组件等.此外,它只是矫枉过正.所以我只是用css和activeClassName做到了:

<li className="link-wrapper">  <!-- add a class to the wrapper -->
  <Link to="something" activeClassName="active">Something</Link>
</li>

然后只需添加一些CSS:

li.link-wrapper > a.active {
    display: block;
    width: 100%;
    height:100%;
    color: white;
    background-color: blue;
}

从技术上讲,这不会影响li,但它会使锚填充li并为其设计样式.

Answer 7

这是我的方式，使用道具的位置。我不知道，但是history.isActive对我来说是不确定的

export default class Navbar extends React.Component {
render(){
const { location } = this.props;

const homeClass = location.pathname === "/" ? "active" : "";
const aboutClass = location.pathname.match(/^\/about/) ? "active" : "";
const contactClass = location.pathname.match(/^\/contact/) ? "active" : "";


return (
<div>
      <ul className="nav navbar-nav navbar-right">
        <li className={homeClass}><Link to="/">Home</Link></li>
        <li className={aboutClass}><Link to="about" activeClassName="active">About</Link></li>
        <li className={contactClass}><Link to="contact" activeClassName="active">Contact</Link></li>
      </ul>

</div>
    );}}

Answer 8

通过react-router-dom@4.3.1（尽管4.x.x我猜任何都应该这样做），我们可以使用withRouterHOC 来完成此任务。例如，我想实现 Bootstrap 导航栏，并且由于它需要一个activeon类<li class="nav-item">而不是 on 锚标记，所以我创建了一个名为的新组件NavItem来封装单个li.nav-item. 实现如下：

import React from "react";
import { Link, withRouter } from "react-router-dom";

const NavItem = ({ isActive, to, label }) => {
  let classes = ["nav-item"];
  if (isActive) classes.push("active");

  return (
    <li className={classes.join(" ")}>
      <Link className="nav-link" to={to}>
        {label}
      </Link>
    </li>
  );
};

export default withRouter(({ location, ...props }) => {
  const isActive = location.pathname === props.to;

  console.log(location.pathname, props.to);

  return <NavItem {...props} isActive={isActive} />;
});

正如你所看到的，NavItem它只是一个无状态的功能组件，它需要一个isActiveprop 来确定是否active应该添加类。现在，为了随着位置的变化更新这个 prop，我们可以利用 HOC withRouter。你可以将任何组件传递给这个函数，它会{ match, location, history }在它的 props 中提供对象以及你传递的对象。在这里，我创建一个内联功能组件，它接收这些对象并使用该location.pathname属性确定当前链接是否是活动链接。这将为我们提供一个Boolean，我们可以将设置返回NavItem到isActive我们使用 计算的值location.pathname。

可以在此处找到一个有效的示例。请告诉我是否有更简单的方法来做到这一点。

Answer 9

从react-router-dom@4.3.1开始，我们可以轻松地使用带有activeClassName的NavLink而不是Link。例子：

import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';

class NavBar extends Component {
  render() {
    return (
      <div className="navbar">
        <ul>
          <li><NavLink to='/1' activeClassName="active">1</NavLink></li>
          <li><NavLink to='/2' activeClassName="active">2</NavLink></li>
          <li><NavLink to='/3' activeClassName="active">3</NavLink></li>
        </ul>
      </div>
    );
  }
}

然后在你的 CSS 文件中：

.navbar li>.active {
  font-weight: bold;
}

NavLink 将根据当前 URL 将自定义样式属性添加到呈现的元素。

文档在这里

Answer 10

在活动导航元素上设置类

import { NavLink } from 'react-router-dom';

&

<NavLink to="/Home" activeClassName="active">Home</NavLink>

Answer 11

当前React 路由器版本 5.2.0

activeStyle是NavLink组件的默认css属性，从react-router-dom导入

这样我们就可以编写自己的自定义 css 使其处于活动状态。在这个示例中，我将背景设置为透明，文本设置为粗体。并将其存储在名为isActive的常量中

    import React from "react";
    import { NavLink} from "react-router-dom";

    function nav() {

          const isActive = {
            fontWeight: "bold",
            backgroundColor: "rgba(255, 255, 255, 0.1)",
          };
    
    return (
          <ul className="navbar-nav mr-auto">
            <li className="nav-item">
              <NavLink className="nav-link" to="/Shop" activeStyle={isActive}>
                Shop
              </NavLink>
            </li>
          </ul>
          );

    export default nav;

Answer 12

在 React Router 版本 6 中，我们通过 NavLink 来完成此操作并设置其 className 属性。

我们正在指定一个函数，该函数将在每次路由更改时调用。

   import { NavLink } from 'react-router-dom';
   
   import classes from './MainHeader.module.css';
   
   const MainHeader = () => {
     return (
       <header className={classes.header}>
         <nav>
           <ul>
             <li>
               <NavLink className={({isActive}) => isActive ? classes.active : ''} to='/welcome'>
                 Welcome
               </NavLink>
             </li>
             <li>
               <NavLink className={({isActive}) => isActive ? classes.active : ''} to='/products'>
                 Products
               </NavLink>
             </li>
           </ul>
         </nav>
       </header>
     );
   };
   
   export default MainHeader;

另外，您可以在此链接上找到完整的教程