我正在尝试使用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;
一些NavLink的片段
<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路线中,并且所有链接都认为它们会显示但我想如果我将精确和严格的参数包含在内,那么它们只会显示特定的导航项目 . 我应该另辟蹊径吗?