从弹出窗口返回时如何重置导航栏项目？

import React, { useState } from 'react';

const NavBar = () => {
  const [selectedItem, setSelectedItem] = useState(null);

  const resetNavBar = () => {
    setSelectedItem(null);
    // 其他重置操作...
  };

  // 监听窗口关闭事件或返回事件
  window.onbeforeunload = resetNavBar;

  const handleItemClick = (item) => {
    setSelectedItem(item);
    // 处理其他导航栏项目的点击事件...
  };

  return (
    <nav>
      <ul>
        <li className={selectedItem === 'Home' ? 'selected' : ''} onClick={() => handleItemClick('Home')}>Home</li>
        <li className={selectedItem === 'About' ? 'selected' : ''} onClick={() => handleItemClick('About')}>About</li>
        <li className={selectedItem === 'Contact' ? 'selected' : ''} onClick={() => handleItemClick('Contact')}>Contact</li>
      </ul>
    </nav>
  );
};

export default NavBar;