Creating "active" dropdown menu item

Question

I have a functioning "dropdown menu" - clicking on "menu item" routes to a different component. I want to change the style of "dropdown menu item" after clicking, so the next time "dropdown menu" opens, "item" that has been clicked has a different look - indicating active state.

Behavior I want to replicate can be observed on the page I'm re-writing in React : code-learning.uk , after clicking on item from black menu dropdown button (USEFUL ST), "menu item" changes color to blue.

DropdownMenu

import { useState } from "react"
import { MenuItemContentSchool } from "./sub-components/MenuItemContentSchool"
import { Link } from "react-router-dom";

const DropdownMenu = () => {

  const [click, setClick] = useState("");  
  const handleClick = () => setClick("hide-menu");

  return (
    <div className={`${click}`}>
    {MenuItemContentSchool.map((item, index) => {
      return (
        <Link to={item.link} onClick={handleClick} key={item.title}>
          {item.title}
        </Link>
      )
    } )}

</div>
  )
}
export default DropdownMenu

NaviMain.js

import { useState } from "react"
import DropdownMenu from "./DropdownMenu";

const NaviMain = () => {

    const [disp, setDisp] = useState(false);
    const hoverOn = () => setDisp(true)
    const hoverOff = () => setDisp(false)       

  return (
    <nav>
        <ul>
            <li onMouseEnter={hoverOn} onMouseLeave={hoverOff}>
                <a>school</a>
                { disp && <DropdownMenu /> }
            </li>            
        </ul>    
    </nav>
  )
}
export default NaviMain

App.js

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import NaviMain from "./components/NaviMain";
import VerticalAlign from "./pages/VerticalAlign";
import Flexbox from "./pages/Flexbox";

function App() {

  return (
    <Router>
        <div className="App">
          <NaviMain />
          <Routes>
            <Route path="/verticalalign" element={<VerticalAlign />} />
            <Route path="/flexbox" element={<Flexbox/>} />
          </Routes>              
        </div>
    </Router>
  );
}

export default App;

MenuItemContentSchool

export const MenuItemContentSchool = [
    {
        title:"v align",
        link:"/verticalalign",
    },
    {
        title:"flexbox",
        link:"/flexbox",
    },
]

Answer 1

Do a check to see if the current page matches the items link, then add a class to the link for that item.

something like:

   const activeClass = window.location.pathname.startsWith(item.link) ? "isActive" : "";

<Link to={item.link} onClick={handleClick} key={item.title} className={activeClass}>
  {item.title}
</Link>