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>
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3fee2-2c4dc.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3fee2-2c4dc.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?