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

Question

我正在尝试使用react router 4的URL来确定如何对某些视图数据进行排序。

（导航图片）

因此，每个导航链接都会转到同一页面，最后只更改参数。例如。

/家/：一般

/家/：比基尼

/家/：内衣

等

这样可行，但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的片段

  <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路线中，并且所有链接都认为它们会显示但我想如果我将精确和严格的参数包含在内，那么它们只会显示特定的导航项目。我应该采取另一种方式吗？

Answer 1

您必须使用此链接方法synatx我的朋友来实现动态路由

Curves.elasticOut