React.js implement menu [highlight active link]

Question

The following React.js code renders a navbar with two links named \'about\' and \'project\'. On page load the \'about\' link is active and colored red. When the other link is

Answer 1

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

about

// Or specifing active style
about

// If you use deep routes and you need an exact match
about

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