使用 React 转到上一页或下一页时如何更改状态？

Question

我有一个状态来跟踪打开子菜单时的状态，并在单击另一个菜单项时切换它。它是这样的：

    const [open, setOpen] = useState();
    const toggle = (id) => setOpen(id);

    onClick={() => toggle(item.navId)}

因此，每次我单击菜单项时，它都会关闭/打开子菜单。但是当我单击浏览器的按钮转到上一页或下一页时，当前打开的子菜单保持打开状态，它不会打开被重定向的子菜单，也不会关闭当前打开的子菜单。当我使用浏览器中的上一个/下一个按钮浏览页面时，我可以使用什么，就像 onClick 更改 state 一样？谢谢！

Answer 1

如果你使用 react 路由器，你可以使用useLocation 钩子和useEffect 来处理路由更改时关闭菜单

const {pathname} = useLocation();
useEffect(()=>{
  setOpen(//whatever here)
},[pathname])

Answer 2

我发现了一个类似的堆栈帖子here，我相信有人的回答可能会帮助您进行一些修改

import React from "react";
import useHistory from "react-router-dom";
import { SubMenu, OtherComponent } from './'; // import your actual components here

export default function YourComponent() {

  const [open, setOpen] = React.useState(false); // toggle submenu
  const [locationKeys, setLocationKeys] = React.useState([]);
  const history = useHistory();

  React.useEffect(() => {
    return history.listen((location) => {
      if (history.action === "PUSH") {
        if (location.key) setLocationKeys([location.key]);
      }

      if (history.action === "POP") {
        if (locationKeys[1] === location.key) {
          setLocationKeys(([_, ...keys]) => keys);

          // Handle forward event
          console.log("forward button");
          setOpen(!open); // toggle submenu
        } else {
          setLocationKeys((keys) => [location.key, ...keys]);

          // Handle back event
          console.log("back button");
          setOpen(!open); // toggle submenu
        }
      }
    });
  }, [locationKeys, history]);

  return (
    <div>
      {open ?? <SubMenu/>}
      // or
      {open ? <SubMenu/> : <OtherComponent/>}
    </div>
  );
}