Ionic中RouterLink跳转同路由不同参数不触发生命周期事件问题咨询

问题原因 #

你遇到的现象是Ionic React路由的默认机制导致的：当跳转前后的路由匹配同一个组件（此处均为匹配/lectures/:name的Lecture组件）时，IonRouterOutlet会直接复用现有组件实例，不会触发组件销毁、重建流程，因此对应的ionViewWillLeave、ionViewDidLeave以及新实例的ionViewDidEnter钩子都不会执行。

可行解决方案 #

方案1：监听路由参数变化（改动最小，性能最优，推荐）

无需修改路由配置，直接在Lecture组件内通过useEffect监听路由参数变化，把原有生命周期内的逻辑迁移过去即可：

import { useParams } from 'react-router-dom';

const Page: React.FC = () => {
  const { name } = useParams<{name: string}>();
  const [lecturaIndex, setLecturaIndex] = useState<number>(0);
  const [btnLinks, setBtnLinks] = useState<{next?: string , prev?: string }>({});

  // 路由参数变化时执行初始化逻辑，代替useIonViewDidEnter
  useEffect(() => {
    const current = lectures.list.find(lecture => lecture.title === name); 
    setLecturaIndex(current.id);
    setBtnLinks({
      next: current.id < 13 ? `/lectures/${languages.list[current.id+1].title}` : '/lectures', 
      prev: current.id > 0 ? `/lectures/${languages.list[current.id-1].title}` : '/lectures'
    });
    indexCheck(current);

    // return内的逻辑代替离开生命周期的清理操作
    return () => {
      console.log('清理旧组件状态');
      // 此处写入你的状态清理逻辑
    }
  }, [name]); // 依赖绑定路由参数name，参数变化自动执行

  return(
    <IonPage>
      <IonContent>        
        <IonButton          
          disabled={nextBtnDisable}           
          routerLink={btnLinks.next}
          routerDirection="forward" // 跳转到下一个条目建议用forward，你之前的back属于写法有误可能导致动画异常
          >
        NEXT
        </IonButton>
      </IonContent>
    </IonPage>
  )
}

方案2：给组件加key强制重挂载（保留原有生命周期写法）

如果你不想修改原有Lecture组件的生命周期逻辑，只需要修改App.tsx的路由配置，给Lecture组件绑定和路由参数关联的key，每次参数变化就会强制销毁重建组件，所有Ionic生命周期钩子都会正常触发：

// App.tsx中对应路由修改如下
<Route path="/lectures/:name" exact render={({match}) => (
  <Lecture key={match.params.name} />
)} />

方案3：使用IonRouter处理导航（适配复杂场景）

如果后续有更复杂的导航需求，可以使用Ionic官方提供的useIonRouter钩子代替React Router原生的useHistory，对Ionic路由的适配性更好：

import { useIonRouter } from '@ionic/react';

const Page: React.FC = () => {
  const ionRouter = useIonRouter();

  const goToPage = (url: string, direction: 'forward' | 'back') => {
    ionRouter.push(url, direction, 'push');
  }

  // 按钮绑定onClick调用goToPage即可，无需使用routerLink属性
}

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