如何將瀏覽器歷史記錄與組件一起使用？

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 事件來處理瀏覽器導航選項。