Reactjs 使用活动navlink类的react路由器跟踪路径

我试图使用react router 4的URL来确定某个视图数据应该如何排序

（导航图像）

所以每个导航链接都指向同一个页面，它们只是在最后更改参数。比如说

/home/：general

/家：比基尼

/家居/内衣

等等

这是可行的，但activeClassName参数将应用于所有这些对象

有没有办法使导航链接仅将样式应用于具有精确链接的链接

路由组件

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;

从“React”导入React；
从“react router”导入{交换机、路由、重定向}；
从“./views/Home/Home”导入主页；
常数CurrentDash=（）=>(
);
导出默认的CurrentDash；

一些导航链接的片段

  <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路径中，所有链接都认为它们会显示，但我认为如果我向它们提供准确和严格的参数，那么它们只会显示特定的导航项目。我应该换一种方式吗？

您必须使用此链接方法来设置动态路由

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

女士内衣