Использование конечного пути реакции-маршрутизатора для активного класса navlink

Question

Я пытаюсь использовать URL реагирующего маршрутизатора 4, чтобы определить, как должны сортироваться данные определенных просмотров.

(Nav Image)

Таким образом, каждая из этих навигационных ссылок переходит на одну и ту же страницу, они просто изменяют параметр вконец.Например.

/ home /: общий

/ home /: бикини

/ home /: нижнее белье

и т. Д.

Это работает, но параметр activeClassName применяется ко всем им

Есть ли способ заставить NavLink применять стили только к ссылкам с EXACTlink.

Компонент маршрутизации

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;

Фрагмент некоторых из ссылок 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>

Я знаю, что это происходит, потому что это в / home маршруте ивсе ссылки думают, что они будут показываться, но я подумал, что если бы я включил в них точные и строгие параметры, то они показывали бы только определенные элементы nav.Должен ли я идти об этом по-другому?

Answer 1

Вы должны использовать эту ссылку, метод synatx, мой друг, для получения динамической маршрутизации

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