使用反应路由器尾随路径的活动navlink类

Question

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

（导航图像）

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

/home/：general

/home/比基尼

/家居/内衣

等

这是可行的，但是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;

一些导航链接的片段

  <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 my friend来设置动态路由

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