如何在react中更新导航栏

import React, { useState } from 'react';

function Navbar() {
  const [activeLink, setActiveLink] = useState('home');

  const handleLinkClick = (link) => {
    setActiveLink(link);
  };

  return (
    <nav>
      <ul>
        <li className={activeLink === 'home' ? 'active' : ''}>
          <a onClick={() => handleLinkClick('home')} href="#">Home</a>
        </li>
        <li className={activeLink === 'about' ? 'active' : ''}>
          <a onClick={() => handleLinkClick('about')} href="#">About</a>
        </li>
        <li className={activeLink === 'contact' ? 'active' : ''}>
          <a onClick={() => handleLinkClick('contact')} href="#">Contact</a>
        </li>
      </ul>
    </nav>
  );
}

export default Navbar;