Ionic Router问题：点击列表项后子页面需刷新才加载

API 探路者

2026-7-11

修复Ionic React列表项点击后需刷新才能跳转的问题

问题原因

在IonTabs组件环境下，IonItem的routerLink属性可能无法正确关联到当前tab对应的IonRouterOutlet，导致路由跳转后页面没有即时渲染，需要手动刷新才能加载目标页面。

修复方案

方案一：为IonItem指定tab属性

在GameListPage.tsx的IonItem上添加tab="games"属性，明确指定跳转时保持在当前的games tab中：

<IonList>
  {gamesJson.map((game) => (
    <IonItem
      routerLink={game.software_used ? `/games/id/${game.steam_appid}` : '/games'}
      key={game.steam_appid}
      tab="games" // 添加这一行
    >
      <IonThumbnail slot="start">
        <img alt={game.name} src={game.header_image} />
      </IonThumbnail>
      <IonLabel>
        <h2>{game.name}</h2>
        <p>{game.developer}</p>
      </IonLabel>
    </IonItem>
  ))}
</IonList>

方案二：使用useNavigate钩子手动处理跳转

改用React Router的useNavigate钩子替代routerLink，手动控制路由跳转逻辑：

在GameListPage.tsx中导入useNavigate：

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

初始化导航函数并替换routerLink为onClick事件：

const GameListPage = () => {
  const navigate = useNavigate(); // 初始化导航函数

  return (
    <IonList>
      {gamesJson.map((game) => (
        <IonItem
          onClick={() => {
            // 手动处理跳转逻辑
            game.software_used 
              ? navigate(`/games/id/${game.steam_appid}`) 
              : navigate('/games');
          }}
          key={game.steam_appid}
          tappable // 添加点击反馈效果
        >
          <IonThumbnail slot="start">
            <img alt={game.name} src={game.header_image} />
          </IonThumbnail>
          <IonLabel>
            <h2>{game.name}</h2>
            <p>{game.developer}</p>
          </IonLabel>
        </IonItem>
      ))}
    </IonList>
  );
};