如何将浏览器历史记录与组件一起使用？

Question

假设我有以下代码：

const [showChild1, setShowChild1] = useState(false)
const [showChild2, setShowChild2] = useState(false)

        <ParentComponent>
          {showChild1 && <Child1 />}
          {showChild1 && <Child2 />}
           ....
      </ParentComponent

假设我正在浏览器中查看Child2 ，但我想返回 go 以查看Child1 。 如何使用浏览器的后退和前进按钮在有条件呈现的组件之间导航？ 截至目前，当我点击后退按钮时，我被推到了路径/ 。

Answer 1

可以在全局window object 添加事件监听，事件名称为“popstate”，代码示例如下：

  useEffect(() => {
    window.history.pushState(null, null, window.location.pathname);
    window.addEventListener('popstate', yourEvent);
    return () => {
      window.removeEventListener('popstate', yourEvent);  
    };
  }, []);

Answer 2

使用 onpopstate 事件来处理浏览器导航选项。