Using the react-router trailing path for active navlink class

Question

I'm trying to use react router 4's URL to determine how a certain views data should be sorted.

(Nav Image)

So each of these nav links all goes to the same page they just change the parameter at the end. For example.

/home/:general

/home/:bikini

/home/:lingerie

etc.

This works but the activeClassName parameter is applied to them all

Is there a way to make a NavLink only apply the styles to the links with the EXACT link.

The Routing Component

import React from 'react';
import {Switch, Route, Redirect} from 'react-router';

import Home from './views/home/Home';

const CurrentDash = () => (
      <Switch>
          <Redirect exact={true} from='/' to='/home/:general' />
          <Route path='/home' component={Home} />
      </Switch>
);

export default CurrentDash;

A snippet of some of the NavLinks

  <NavigationLinkWrapper>
              <NavigationLink>
                <NavLink exact strict to='/home/:bikini' activeClassName='navigation-link--active'>Bikini</NavLink>
              </NavigationLink>
            </NavigationLinkWrapper>

            <NavigationLinkWrapper>
              <NavigationLink>
                <NavLink exact strict to='/home/:lingerie' activeClassName='navigation-link--active'>Lingerie</NavLink>
              </NavigationLink>
            </NavigationLinkWrapper>

            <NavigationLinkWrapper>
              <NavigationLink>
                <NavLink exact strict to='/home/:makeup' activeClassName='navigation-link--active'>Makeup</NavLink>
              </NavigationLink>
            </NavigationLinkWrapper>

I know this is happening because this is in the /home route and all the links think they would show but I thought if I included the exact and strict parameters to them then they would show the specific nav-items only. Should I be going about this another way?

Arash Ammarlooi Arash Ammarlooi · Accepted Answer · 2019-02-04T21:50:06

you must use this link methode synatx my friend for geeting a dynamic routing

 <NavigationLinkWrapper>
          <NavigationLink>
            <NavLink exact strict to={`/home/${data.id}`} activeClassName='navigation-link--active'>Lingerie</NavLink>
          </NavigationLink>
        </NavigationLinkWrapper>

Using the react-router trailing path for active navlink class

1 Answers