score:0

Accepted answer

there is actually a property of activeclassname in navlink of react router.

it goes like this

import { navlink } from 'react-router-dom`
...

<navlink exact activeclassname="your_active_css_classname" classname="normal_css">link name </navlink>

don't forget to add exact. read more here: https://reacttraining.com/react-router/web/api/navlink

score:0

light/fast way to do this would be to change the class at the parent dom element of these <link> elements... from there the css would do what it works best.

assuming these <link> ... </link> tags are enclosed inside a <nav> ... </nav> tag, which is the parent dom element.

{ (onthepage) ? <nav classname="onthepageclass"> ... </nav> : <nav classname="normalclass"> ... </nav> }

try this else share mvce if you get stuck so that it serves as a good example for others looking for help


Related Query

More Query from same tag