Ionic React验证通过后实现页面重定向的方法

你遇到的问题很典型：直接在点击函数里返回<MainMenu/>组件并不能触发路由跳转，因为React组件的返回值是用来渲染UI的，不是用来控制页面导航的。Ionic React基于React Router，咱们可以用编程式导航来完成验证后的跳转，具体步骤如下：

步骤1：导入导航钩子 #

首先从react-router-dom导入useNavigate钩子，这是React Router提供的编程式导航工具：

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

步骤2：初始化导航函数 #

在你的LogIn组件内部初始化navigate函数：

const LogIn: React.FC<{register?: boolean; onClose?: any}> = () => {
  const [email, setEmail] = useState<string>();
  const [password, setPassword] = useState<string>();
  // 新增：初始化导航函数
  const navigate = useNavigate();

  // ... 其他代码
}

步骤3：修改登录点击函数 #

在handleLoginButtonPress里，验证通过后调用navigate方法跳转到目标页面，同时要阻止表单的默认提交行为（避免页面刷新）：

function handleLoginButtonPress(e: React.FormEvent) {
  // 阻止表单默认提交行为
  e.preventDefault();
  
  if (validateEmail() && password !== undefined && password.trim() !== "") {
    // 这里替换成你的网络请求逻辑
    console.log("valid email");
    // 跳转到MainMenu页面，路径要和你的路由配置一致
    navigate('/main-menu');
  }
}

步骤4：确保路由配置正确 #

最后要确认你的路由配置文件（比如App.tsx）里已经添加了MainMenu的路由规则：

import { IonApp, IonRouterOutlet } from '@ionic/react';
import { Routes, Route } from 'react-router-dom';
import LogIn from './pages/LogIn';
import MainMenu from './pages/MainMenu';

function App() {
  return (
    <IonApp>
      <IonRouterOutlet>
        <Routes>
          <Route path="/login" element={<LogIn />} />
          {/* 新增MainMenu的路由 */}
          <Route path="/main-menu" element={<MainMenu />} />
          <Route path="/" redirectTo="/login" />
        </Routes>
      </IonRouterOutlet>
    </IonApp>
  );
}

修改后的完整组件代码 #

这里是更新后的LogIn组件，标注了所有改动点：

import React, { useState } from 'react';
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonInput, IonButton, IonRow, IonCol, useIonViewWillEnter, useIonViewWillLeave, IonLabel } from '@ionic/react';
// 新增：导入useNavigate
import { useNavigate } from 'react-router-dom';
import './LogIn.css'
import MainMenu from "../MainMenu";

const LogIn: React.FC<{register?: boolean; onClose?: any}> = () => {
  const [email, setEmail] = useState<string>();
  const [password, setPassword] = useState<string>();
  // 新增：初始化导航函数
  const navigate = useNavigate();

  // 修改：添加e参数阻止默认行为，替换返回组件为navigate
  function handleLoginButtonPress(e: React.FormEvent) {
    e.preventDefault();
    if (validateEmail() && password !== undefined && password.trim() !== "") {
      // Network call here to check if a valid user
      console.log("valid email")
      navigate('/main-menu');
    }
  }

  function validateEmail () {
    if (email !== undefined && email.trim() !== "") {
      const regexp = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      return regexp.test(email);
    }
    return false;
  }

  useIonViewWillEnter(() => {
    console.log("Entering LogIn");
  });

  useIonViewWillLeave(() => {
    console.log("Exiting LogIn");
  });

  return (
    <IonPage id="loginIonPage">
      <IonHeader>
        <IonToolbar color="primary" mode="md">
          <IonTitle class="ion-text-center">Login or Register</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent id="loginPage">
        <div id="loginDialog">
          <form>
            <IonLabel>Email</IonLabel>
            <IonRow>
              <IonCol id="userName">
                <IonInput name="email" value={email} onIonChange={e => setEmail(e.detail.value!)} clearInput type="email" placeholder="Email" class="input" padding-horizontal clear-input="true" required/>
              </IonCol>
            </IonRow>
            <IonLabel>Password</IonLabel>
            <IonRow>
              <IonCol id="password">
                <IonInput clearInput name="password" value={password} onIonChange={e => setPassword(e.detail.value!)} type="password" placeholder="Password" class="input" padding-horizontal clear-input="true" required/>
              </IonCol>
            </IonRow>
          </form>
        </div>
        <div id="buttons">
          <IonButton onClick={handleLoginButtonPress} type="submit" strong={true} expand="full" style={{ margin: 20 }}>
            Log in
          </IonButton>
          <IonButton routerLink="/registerUser" type="submit" strong={true} expand="full" style={{ margin: 20 }}>
            Register
          </IonButton>
        </div>
      </IonContent>
    </IonPage>
  );
};

export default LogIn;

这样修改后，当登录验证通过时，就会正确跳转到MainMenu页面了。如果你的MainMenu路由路径不是/main-menu，记得把navigate里的路径改成你实际配置的路径哦。

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