React Ionic页面重复加载问题排查与修复请求

你代码里的核心问题是Route的错误写法：每个Tab对应的Route标签，同时使用了component属性指定组件，又在标签内部直接渲染了组件实例（比如<Route exact path="/tab1" component={Tab1}><Tab1 /></Route>）。这种写法会让React同时通过两种方式渲染同一个组件，直接导致页面（包括地图所在的Tab4）被重复加载。

另外，你还定义了两个完全相同的根路径/的Redirect路由，这会造成路由匹配冗余，可能加重页面加载异常的问题。

1. 修正Route的渲染方式 #

移除Route标签内部嵌套的组件实例，只保留component属性（或如果你使用React Router v6+，推荐改用element属性），二选一即可。

2. 合并重复的根路径Redirect #

保留一个根路径的Redirect规则，避免路由匹配冲突。

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <Menu />
      <IonTabs>
        <IonRouterOutlet id='main'>
          {/* 根路径统一Redirect到欢迎页 */}
          <Route path="/" exact={true}>
            <Redirect to="/pages/Welcome/Welcome" />
          </Route>
          <Route path="/pages/Contact/Contact" component={Contact} strict={true} exact={true} />
          <Route path="/pages/FAQ/FAQ" component={FAQ} strict={true} exact={true} />
          <Route path='/pages/AboutUs/AboutUs' component={AboutUs} strict={true} exact={true} />
          <Route path='/pages/AccountPage/AccountPage' component={AccountPage} strict={true} exact={true} />
          <Route path="/pages/welcome" component={WelcomePage} />

          {/* 修正Tab路由：移除内部嵌套的组件实例 */}
          <Route exact path="/tab1" component={Tab1} />
          <Route path="/tab2" exact={true} component={Tab2} />
          <Route exact path="/tab4" component={Tab4} />
        </IonRouterOutlet>
        <IonTabBar className='ion-tab-bar' slot="bottom">
          <IonTabButton tab="tab1" href="/tab1">
            <IonIcon aria-hidden="true" icon={home} />
            <IonLabel>Home</IonLabel>
          </IonTabButton>
          <IonTabButton tab="tab2" href="/tab2">
            <IonIcon aria-hidden="true" icon={speedometer} />
            <IonLabel>Compteurs</IonLabel>
          </IonTabButton>
          <IonTabButton tab="tab4" href="/tab4">
            <IonIcon aria-hidden="true" icon={navigateOutline} />
            <IonLabel>Trouver ma borne</IonLabel>
          </IonTabButton>
        </IonTabBar>
      </IonTabs>
    </IonReactRouter>
  </IonApp>
);

export default App;

额外说明 #

如果你的项目使用的是React Router v6+（Ionic 6+通常搭配这个版本），建议将component属性改为element属性，写法如下：

<Route exact path="/tab1" element={<Tab1 />} />

这种写法更符合React Router v6的规范，也能避免一些版本兼容问题。

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