Ionic7+React18：URL哈希变化时激活对应组件的方案

你的问题出在useEffect的依赖为空数组，它只会在组件首次挂载时执行一次，后续URL哈希变化不会触发这个钩子。要实现哈希变化时切换组件，需要监听浏览器的hashchange事件，具体实现如下：

修正后的代码 #

const MyContainer: React.FC<ContainerProps> = () => {
  // 提取哈希处理逻辑为单独函数
  const handleHashChange = () => {
    const hash = window.location.hash.substring(1);
    switch (hash) {
      case 'name':
        dispatch(setStep(StepsEnum.Name));
        break;
      case 'address':
        dispatch(setStep(StepsEnum.Address));
        break;
      case 'message':
        dispatch(setStep(StepsEnum.Message));
        break;
      default:
        // 处理默认情况，比如跳转到第一个步骤
        dispatch(setStep(StepsEnum.Name));
    }
  };

  useEffect(() => {
    // 组件挂载时执行一次，确保初始哈希生效
    handleHashChange();
    // 添加hashchange事件监听
    window.addEventListener('hashchange', handleHashChange);
    
    // 组件卸载时移除监听，防止内存泄漏
    return () => {
      window.removeEventListener('hashchange', handleHashChange);
    };
  }, [dispatch]); // 依赖加入dispatch，确保引用稳定

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

export default MyContainer;

关键说明 #

• 监听hashchange事件：浏览器URL哈希变化时会触发该事件，此时调用处理函数更新步骤状态。
• 初始执行：组件挂载时手动执行一次handleHashChange，确保页面加载时就能根据当前哈希显示对应组件。
• 清理监听：在useEffect的返回函数中移除事件监听，避免组件卸载后仍残留监听导致内存泄漏。
• 依赖项：将dispatch加入依赖数组，保证当dispatch引用变化时（Redux的dispatch通常稳定），能正确重新绑定监听。

内容的提问来源于stack exchange，提问作者Dave