其他资料都太老了,在react-router 4.x之后版本,我想实现如下效果:
<div className="single-link"> <NavLink activeClassName="active"className="link"to="/PeriodicalAdmin/PeriodicalAdmin">这是父级页面链接</NavLink></div>
<Route path="/PeriodicalAdmin/PeriodicalAdmin" component={PeriodicalAdmin}/>
<Route path="/PeriodicalAdmin/AddPeriodical/AddPeriodical" component={AddPeriodical}/>`
就是点击右下角新增期刊后,左侧的期刊能依旧保持选中状态
其中/PeriodicalAdmin/PeriodicalAdmin是父级页面,/PeriodicalAdmin/AddPeriodical/AddPeriodical
是他的子页面,我希望在进入子页面的时候,父级页面链接依旧保持activeClassName的高亮,思路如何解决,谢谢大家
比如你的左侧菜单数据是这样的
[
{
path:'/PeriodicalAdmin/AddPeriodical',
name:'菜单1',
children:[
{
path:'/PeriodicalAdmin/AddPeriodical/AddPeriodical',
name:'菜单1-1'
}
]
},
{
path:'/PeriodicalAdmin/AddPeriodical2',
name:'菜单2',
children:[
{
path:'/PeriodicalAdmin/AddPeriodical2/AddPeriodical2',
name:'菜单2-2'
}
]
},
xxx
]
然后你获取到当前路由path
为 /PeriodicalAdmin/AddPeriodical/AddPeriodical
。
首先分隔 path => ['/PeriodicalAdmin/AddPeriodical','/PeriodicalAdmin/AddPeriodical/AddPeriodical']
。用这个分隔后的数据去菜单数据里比较,如果菜单数据里某一项的path
属性值在这个数组里,就需要把这一项为选中状态。 这时示例中的菜单1
和菜单1-1
符合条件。就把它俩选中。
需要你命名路由时定好规范。