Ionic React中history.push改URL但不渲染页面的解决方法

问题核心 #

登录成功后调用history.push("/dashboard")仅更新URL但页面停留在登录页，需刷新才显示仪表盘，本质是路由配置、组件写法与Ionic/React Router版本不匹配导致的渲染异常。

错误分析与修复步骤 #

1. 修复Dashboard组件命名错误 #

你的Dashboard.tsx中错误地将组件命名为Login，即使最后导出Dashboard，也会导致组件识别混乱，这是页面不渲染的直接原因之一。

2. 适配React Router v6导航API #

Ionic React当前基于React Router v6，useHistory已被废弃，需使用useNavigate钩子进行路由跳转，它能更好地兼容Ionic的页面生命周期。

3. 统一React Router v6路由语法 #

React Router v6不再支持component属性，必须改用element传递组件实例，同时所有路由需包裹在<Routes>标签内，旧写法会导致路由匹配失效。

4. 确保页面组件包裹在<IonPage>中 #

Ionic的路由系统依赖<IonPage>管理页面切换动画与生命周期，未包裹的组件无法触发页面切换逻辑。

修改后的完整代码 #

App.tsx #

import { IonApp, IonReactRouter, IonRouterOutlet } from '@ionic/react';
import { Route, Routes, Navigate } from 'react-router-dom';
import Login from './Login';
import Dashboard from './Dashboard';

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
        <Routes>
          <Route path="/login" element={<Login />} />
          <Route path="/dashboard" element={<Dashboard />} />
          <Route path="/" element={<Navigate to="/login" />} />
        </Routes>
      </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
);

export default App;

Login.tsx #

import React, { useEffect, useState } from 'react';
import { useNavigate } from "react-router-dom";
import { useAuthState } from "react-firebase-hooks/auth";
import { auth } from "../config/firebase";
import { IonPage, IonContent, IonGrid, IonRow, IonCol, IonItem, IonLabel, IonInput, IonButton } from "@ionic/react";

const Login: React.FC = () => {
  const navigate = useNavigate();
  const [ email, setEmail ] = useState<string>("");
  const [ password, setPassword ] = useState<string>("");
  const [ user, loading, error ] = useAuthState(auth);

  useEffect(() => {
    if (loading) return;
    if (user) {
      console.log("Go to dashboard");
      navigate("/dashboard");
    }
  }, [user, loading, navigate]);

  const handleCredentials = async () => {
    try {
      await auth.signInWithEmailAndPassword(email, password);
    } catch (err) {
      console.error(err);
    }
  }

  return (
    <IonPage className="login-page">
      <IonContent fullscreen className="ion-padding ion-text-center">
        <IonGrid>
          <IonRow>
            <IonCol>
              <IonItem>
                <IonLabel position="floating">Email</IonLabel>
                <IonInput
                  type="email"
                  value={email}
                  onIonChange={(e) => setEmail(e.detail.value!)}
                  placeholder="Email Address"
                ></IonInput>
              </IonItem>
            </IonCol>
          </IonRow>
          <IonRow>
            <IonCol>
              <IonItem>
                <IonLabel position="floating">Password</IonLabel>
                <IonInput
                  type="password"
                  value={password}
                  onIonChange={(e) => setPassword(e.detail.value!)}
                  placeholder="Password"
                ></IonInput>
              </IonItem>
            </IonCol>
          </IonRow>
          <IonRow>
            <IonCol>
              <IonButton className="login__btn" expand="block" onClick={handleCredentials}>Login</IonButton>
            </IonCol>
          </IonRow>
        </IonGrid>
      </IonContent>
    </IonPage>
  );
};

export default Login;

Dashboard.tsx #

import React, { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { useAuthState } from "react-firebase-hooks/auth";
import { auth } from "../config/firebase";
import { IonPage, IonContent } from "@ionic/react";

const Dashboard: React.FC = () => {
  const navigate = useNavigate();
  const [user, loading, error] = useAuthState(auth);

  useEffect(() => {
    if (loading) return;
    if (!user) {
      console.log("Go to log in");
      navigate("/login");
      return;
    }
    console.log("Stay in Dashboard");
  }, [user, loading, navigate]);

  return (
    <IonPage className="dashboard">
      <IonContent fullscreen>
        <div className="dashboard__container">
          Logged in
        </div>
      </IonContent>
    </IonPage>
  );
}

export default Dashboard;

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