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&nbsp;activeClassName="navitemActive"&nbsp;to="/list"> &nbsp;&nbsp;&nbsp;&nbsp;<span&nbsp;style={{&nbsp;color:&nbsp;'red'&nbsp;}}>水果分类</span></NavLink>