React routing nesting

Header.js (component) / / this is a navigation where apples and pears appear when there is a secondary menu hover. Wait

<div>
    <NavLink activeClassName="navitemActive" to="/list"></NavLink>
    <div className="NavItemBoxTwo">
        <NavLink to="/list"></NavLink >
        <NavLink to="/list"></NavLink >
    </div>
</div>

App.js / / responsible for the entire architecture

<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>

problem description: how to make the "Fruit Category" highlight when transferring from the list list to this fruit details details

Apr.07,2022

<NavLink activeClassName="navitemActive" to="/list">
    <span style={{ color: 'red' }}></span>
</NavLink>
Menu