React.js implement menu [highlight active link]

At this day you can use NavLink from react-router-dom. This object supports attributes as activeClassName, activeStyle, or isActive (for functions).

import { NavLink } from 'react-router-dom';<NavLink to='about' activeClassName="active">about</NavLink>// Or specifing active style<NavLink to='about' activeStyle={{color: "red"}}>about</NavLink>// If you use deep routes and you need an exact match<NavLink exact to='about/subpath' activeClassName="active">about</NavLink>

For more options read documentation: https://reacttraining.com/react-router/web/api/NavLink

maybe slightly less verbose... in Pseudocode

const menuItems = [   'projects',   'about',];class MenuExample extends React.Component {  _handleClick(menuItem) {     this.setState({ active: menuItem });  }  render () {     const activeStyle = { color: '#ff3333' };    return (       <div className='menu'>           {menuItems.map(menuItem =>             <Link              style={this.state.active === menuItem ? activeStyle : {}}              onClick={this._handleClick.bind(this, menuItem)}            >               {menuItem}            </Link>         )}       </div>    );      }}