反应路由器跟踪活动链接

Question

Since react-router is not adding an active class to links or li's, I want to keep the active link in my menus state. When I log this.state.activeLink I get the correct value, but for some reason the class 'activeLink' is not added to the li. Why is this? isActive() is correctly returning true or false when I log it but still the class is not added to the li. What's going on here?

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

import logo from '../images/logo.png';

export default class Navbar extends Component {
    constructor(props){
        super(props);

        this.state = { activeLink : '' };
        this.setActive = this.setActive.bind(this);
    }

    setActive(event){
        this.setState({ activeLink: event.target.id });
    }

    isActive(link){
        console.log('isActive:', link == this.state.activeLink);
        link == this.state.activeLink ? 'activeLink' : '';
    }

    render(){
        return (
            <div className="header">
                <div className="row">
                    <div className="header-left">
                        <div className="logo">
                            <img src={logo} alt=""/> 

                        </div>
                        <div className="header-title">Physical Twist</div>

                        <div className="menu">
                            <ul className="nav">
                                <li className={this.isActive('home')}><Link to="/" id="home" onClick={this.setActive}>Home</Link></li>
                                <li className={this.isActive('store')}><Link to="/store" id="store" onClick={this.setActive}>Store</Link></li>
                                <li className={this.isActive('catalogue')}> <Link to="#" id="catalogue" onClick={this.setActive}>Catalogue</Link></li>
                                <li className={this.isActive('contact')} ><Link to="#" id="contact" onClick={this.setActive}>Contact</Link></li>
                            </ul>
                        </div>                              
                    </div>
                </div>
            </div>
        );
    };
}

Answer 1

isActive is not returning anything.

isActive(link){
    link == this.state.activeLink ? 'activeLink' : '';
}

should be

isActive(link){
    return link == this.state.activeLink ? 'activeLink' : '';
}

Answer 2

Because you forgot to add return in isActive() function, use this:

isActive(link){
   console.log('isActive:', link == this.state.activeLink);
   return link == this.state.activeLink ? 'activeLink' : '';
}