react-router 如何实现点击二级导航时，一级导航依旧保持高亮？

Question

    其他资料都太老了，在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的高亮，思路如何解决，谢谢大家

Answer 1

比如你的左侧菜单数据是这样的

[
    {
        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符合条件。就把它俩选中。

需要你命名路由时定好规范。