Ionic/React应用<Link>传参异常：网页正常，模拟器参数为undefined

核心问题排查与修复方案 #

1. 修正PrivateRoute的组件传递方式 #

你的路由配置中，PrivateRoute直接传入了已实例化的组件（<ItemDetail/>），这会导致路由参数无法通过props传递给组件。Native环境下Ionic的路由对这种写法的兼容性更严格，而网页端可能存在容错处理。

修改App.tsx中的路由配置：

<IonRouterOutlet id="main">
    ........
    <Route exact path="/collection/list">
        <PrivateRoute component={CollectionList} />
    </Route>
    <Route exact path="/collection/detail/:itemId">
        <PrivateRoute component={ItemDetail} />
    </Route>
    ........
    <FirstPage/>
</IonRouterOutlet>

或者将PrivateRoute与Route合并（推荐）：

<PrivateRoute exact path="/collection/list" component={CollectionList} />
<PrivateRoute exact path="/collection/detail/:itemId" component={ItemDetail} />

确保PrivateRoute的实现正确传递路由props，示例实现：

const PrivateRoute = ({ component: Component, ...rest }) => {
  return (
    <Route
      {...rest}
      render={(props) => {
        // 替换为你的鉴权逻辑
        return isAuthenticated() ? <Component {...props} /> : <Redirect to="/login" />;
      }}
    />
  );
};

2. 替换为Ionic原生的IonLink组件 #

react-router-dom的原生<Link>在Native（Capacitor/Cordova）环境下可能存在路由同步问题，Ionic提供的<IonLink>针对Native环境做了适配。

修改页面A的链接：

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

// 替换原Link组件
<IonLink routerLink={`/collection/detail/${itemid}`}>Item Id: {itemid}</IonLink>

3. 强制Native环境使用Hash路由模式 #

Native的WebView可能不支持HTML5 History模式，显式指定historyType="hash"可以避免路由解析异常。

修改App.tsx中的IonReactRouter：

<IonReactRouter historyType="hash">
    <IonSplitPane contentId="main">
        <Menu/>
        <IonRouterOutlet id="main">
            {/* 路由配置 */}
        </IonRouterOutlet>
    </IonSplitPane>
</IonReactRouter>

4. 清除模拟器缓存并重新构建 #

模拟器可能缓存了旧的路由配置，执行以下步骤彻底刷新：

• 执行ionic build重新构建Web资源
• 执行npx cap sync同步资源到Native项目
• 在模拟器中卸载应用或清除应用数据
• 重新运行npx cap run ios（iOS）或npx cap run android（Android）

5. 检查参数名大小写一致性 #

确认路由参数名、useParams解构名完全一致：

• 路由路径中是:itemId（大写I和D）
• 页面B中解构const { itemId } = useParams();是正确的
• 页面A中传递的变量itemid确保有有效值（可通过console.log打印验证）

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