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

Question

我使用链接创建了一个引导式侧边栏。以下是我的代码片段：

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

我想在包装元素

我还发现https://github.com/insin/react-router-active-component 但感觉这是没有必要的。

在React路由器中，这是可能的还是需要使用外部解决方案？




Answer 1

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

>

首先导入它

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

使用activeClassName获取活动类属性。

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

<NavLink to="/store" activeClassName="active">
 Store
</NavLink>

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

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

.active{
  color:#fcfcfc;
 }

Answer 2

React路由器V4附带了一个现成的NavLink组件

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

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

Answer 3

在链接组件上，现在可以添加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>