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

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

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

在链接组件上,您现在可以添加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(
            
                {this.props.children}
            
        );
    }
}

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

export default NavLink;

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

Hello

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 (
            

                
            
        );
    }
}

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

export default NavLink;

  
  Something

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

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 (

      

        
Home
        
About
        
Contact
      


    );}}