为活动的 navlink 类使用 react-router 尾随路径答案

【问题标题】：Using the react-router trailing path for active navlink class为活动的 navlink 类使用 react-router 尾随路径
【发布时间】：2018-11-19 17:32:02
【问题描述】：

我正在尝试使用反应路由器 4 的 URL 来确定应如何对某些视图数据进行排序。

（导航图片）

因此，这些导航链接中的每一个都转到相同的页面，它们只是在最后更改了参数。例如。

/home/:一般

/home/:比基尼

/home/:内衣

等等

这可行，但 activeClassName 参数适用于所有这些

有没有办法让 NavLink 只将样式应用于带有 EXACT 链接的链接。

路由组件

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 的 sn-p

  <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 路线中，并且所有链接都认为它们会显示，但我认为如果我向它们包含确切和严格的参数，那么它们将仅显示特定的导航项。我应该以另一种方式解决这个问题吗？

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

您必须使用此链接方法我的朋友 synatx 获取动态路由

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

【讨论】：