react-router - 如何将事件类添加到 React Router 的链接？

Question

我使用 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> 。我看到还有其他解决方案展示了如何执行此操作，例如 Conditionally set active class on menu using react router current route ，但是我认为这不是将包装器上的事件类设置为 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>