如果 URL 哈希发生变化，如何激活效果？

Question

我正在使用 Ionic 7 和 React 18。如果 URL 的哈希部分发生变化，我想在容器中激活不同的组件。我尝试过这样做：

const MyContainer: React.FC<ContainerProps> = () => {
    ...

  useEffect(() => {
    // Set step based on the hash in the URL
    const hash = window.location.hash.substring(1); // Remove the '#' from the hash
    switch (hash) {
        ...
      case 'message':
        dispatch(setStep(StepsEnum.Message));
        break;
    }
  }, []);

    ...
        {step === StepsEnum.Name && <MyFirstComponent />}
        {step === StepsEnum.Address && <MySecondComponent  />}
        {step === StepsEnum.Message && <MyThirdComponent />}
      </IonContent>
    </IonPage>
  )
}

export default MyContainer

不幸的是，当我在浏览器中输入不同的哈希值时，没有任何反应（至少，我没有看到我的 useEffect 被调用）。是否可以根据 URL 的哈希值激活不同的组件？

Answer 1

除非您使用提供跟踪 URL 更改的钩子的路由器（例如 React Router），否则您需要显式侦听

hashchange

事件。

示例（点击链接）：

const { useState, useEffect } = React;

const MyContainer = () => {
  const [hash, setHash] = useState();

  useEffect(() => {
    const handleUrlChange = () => {
      setHash(new URL(window.location).hash);
    };
    
    window.addEventListener('hashchange', handleUrlChange);
    
    return () => {
      window.removeEventListener('hashchange', handleUrlChange);
    };
  }, []);
  
  return (
    <div>
      <a href="#1">1</a>
      <a href="#2">2</a>
      <a href="#3">3</a>
      <a href="#4">4</a>
      {hash}
    </div>
  );
};

ReactDOM
  .createRoot(root)
  .render(<MyContainer />);

a {
  margin: 0.5em;
}

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

<div id="root"></div>