react 路由嵌套

Question

Header.js (组件)//这个是一个导航 有二级菜单 hover的时候会出现 苹果,梨...等等

<div>
    <NavLink activeClassName="navitemActive" to="/list">水果分类</NavLink>
    <div className="NavItemBoxTwo">
        <NavLink to="/list">苹果</NavLink >
        <NavLink to="/list">梨</NavLink >
    </div>
</div>

App.js //负责整个的架构

<BrowserRouter>
    <div>
        <Header/>
        <Route exact path="/" component={Home}></Route>
        <Route exact path="/list" component={list}></Route>
        <Route path="/details/:id" component={Details}></Route>
    </div>
</BrowserRouter>

问题描述：当从list列表调转到这个水果详情details的时候 怎么让"水果分类"挂上高亮样式

Answer 1

<NavLink activeClassName="navitemActive" to="/list">
    <span style={{ color: 'red' }}>水果分类</span>
</NavLink>