React Nav Link activeStyle not being applied when url has parameter

user_5660855 0
Viewed 1610

I have a NavLink header. The user logs in first, then the url has the user email as a url parameter.

The problem is that the activeStyle is not being applied because I think the NavLink to url is not matching up. Or I am not using activeStyle right. If I need to have the url parameter, is there a work-around to get activeStyle to work with my NavLinks? 

<div>
  <ul>
    <li><NavLink activeStyle={{borderBottom: '3px solid #46b4f0'}} className="Nav_link" to={"/jasper/about" + email}>About</NavLink></li>
    <li><NavLink activeStyle={{borderBottom: '3px solid #46b4f0'}} className="Nav_link" to={"/jasper" + email}>Jasper</NavLink></li>
    <li><NavLink activeStyle={{borderBottom: '3px solid #46b4f0'}} className="Nav_link" to={"/jasper/contact" + email}>Contact</NavLink></li>
    <li><NavLink activeStyle={{borderBottom: '3px solid #46b4f0'}} className="Nav_link" to={"/jasper/search" + email}>Search</NavLink></li>
  </ul>
</div>

<div>
  <Route path="/jasper/about" component={About} />
  <Route exact path="/jasper" component={Jasper} />
  <Route path="/jasper/contact" component={Contact} />
  <Route path="/jasper/search" component={Search} />
</div>
react-router reactjs
1 Answers

You can add an isActive property and use logic for the active state to include the email at the end of the pathname

<NavLink
  to="/events/123"
  isActive={(location) => location.pathname === this.props.pathname + email}
>Event 123</NavLink>
user_96138990
Related