如何将活动类添加到 React Router 的链接? [英] How do I add an active class to a Link from React Router?

问题描述

我使用 Link 创建了一个引导程序风格的侧边栏.这是我的代码片段:

I've created a bootstrap-style sidebar using Link. Here is a snippet of my code:

<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.我看到还有其他解决方案可以展示如何执行此操作，例如 有条件地使用反应路由器当前路由在菜单上设置活动类，但是我认为这不是将包装器上的活动类设置为 Link 的最佳方法.

I want to set the class for the active path to active on the wrapping element <li>. I see there are other solutions out there that show how to do this like Conditionally set active class on menu using react router current route, however I don't think that it's the best way to set an active class on a wrapper to a Link.

我还发现了 https://github.com/insin/react-router-active-component 但感觉没必要.

I also found https://github.com/insin/react-router-active-component but it feels like it is unnecessary.

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

In React Router, is this possible or do I need to use an external solution?

推荐答案

在 Link 组件上，您现在可以添加 activeClassName 或设置 activeStyle.

On the Link component you can now add activeClassName or set activeStyle.

这些使您可以轻松地向当前活动的链接添加样式.

These allow you to easily add styles to the currently active link.

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

Previously, you could create a custom component that works like a wrapper to Link with the following logic.

在名为 nav_link.js 的文件中

In a file called 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;

并在您的组件中按如下所示使用它:

And use it as given below in your component:

...
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>

这篇关于如何将活动类添加到 React Router 的链接?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！