错误：IonRouterContext 需要 Ionic 路由器

Question

我在 React 和 Typescript 项目中使用 Ionic Framework 和 Firebase，在成功身份验证登录后尝试导航时遇到错误“IonRouterContext 需要 Ionic Router”。

我已尝试删除 AppRoutes 文件并将其全部放在 App.tsx 中，但仍然遇到错误。

应用程序.tsx

const App: React.FC = () => {
    return (
        <IonApp>
            <IonReactRouter>
                <IonRouterOutlet>
                    <AppRoutes />
                </IonRouterOutlet>
            </IonReactRouter>
        </IonApp>
    )
}

export default App

appRoutes.tsx

import React from 'react'
import { Route } from 'react-router-dom'
import { IonRouterOutlet } from '@ionic/react'

import Dashboard from '@/pages/dashboard'

import SignUp from '@/components/onboarding/signup'
import Login from '@/components/onboarding/login'
import Landing from '@/components/onboarding/landing'

const AppRoutes: React.FC = () => {
    return (
        <IonRouterOutlet>
            <Route exact path="/" component={Landing} />
            <Route exact path="/onboarding" component={Landing} />
            <Route exact path="/signup" component={SignUp} />
            <Route exact path="/login" component={Login} />
            <Route exact path="/dashboard" component={Dashboard} />
        </IonRouterOutlet>
    )
}

export default AppRoutes

landing.tsx（此处用于登录和注册组件的路由）

import React from 'react'
import { IonContent, IonButton, IonPage, IonNavLink } from '@ionic/react'

import '@/styles/onboarding/landing.scss'
import SignUp from './signup'
import Login from './login'

const Landing: React.FC = () => {
    return (
        <>
            <IonContent fullscreen>
                <div className="container">
                    <div className="buttons ion-float-bottom">
                        <IonNavLink routerDirection="forward" component={() => <SignUp />}>
                            <IonButton className="signup-btn" fill="solid" expand="block">
                                Create an account
                            </IonButton>
                        </IonNavLink>
                        <IonNavLink routerDirection="forward" component={() => <Login />}>
                            <IonButton className="login-btn" fill="outline" expand="block">
                                Sign In
                            </IonButton>
                        </IonNavLink>
                    </div>
                </div>
            </IonContent>
        </>
    )
}

export default Landing

登录.tsx

import React, { useState } from 'react'
import { IonPage, IonContent, IonHeader, IonInput, IonButton, IonItem, IonButtons, IonBackButton, useIonRouter } from '@ionic/react'
import { loginUser } from '@/auth/firebase'

import '@/styles/onboarding/login.scss'

const Login: React.FC = () => {
    const router = useIonRouter()

    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')
    const [error, setError] = useState<string | null>(null)

    const handleLogin = async () => {
        try {
            const user = await loginUser(email, password)

            if (user) {
                // Login successful, redirect to dashboard
                router.push('/dashboard')
            } else {
                setError('Invalid email or password')
            }
        } catch (error) {
            console.log(`---error:`, error)

            setError('Error logging in')
        }
    }

    return (
        <IonPage className="login-page">
            <IonHeader>
                <IonButtons slot="start">
                    <IonBackButton defaultHref="/" />
                </IonButtons>
            </IonHeader>
            <IonContent className="ion-padding">
                <IonItem>
                    <IonInput type="email" placeholder="Email" value={email} onIonChange={e => setEmail(e.detail.value!)} />
                </IonItem>
                <IonItem>
                    <IonInput type="password" placeholder="Password" value={password} onIonChange={e => setPassword(e.detail.value!)} />
                </IonItem>

                {error && <p style={{ color: 'red' }}>{error}</p>}

                <IonButton id="login-button" expand="block" onClick={handleLogin}>
                    Login
                </IonButton>
            </IonContent>
        </IonPage>
    )
}

export default Login

router.push('/dashboard')

是这里的问题，给了我这个错误。我的结构不正确吗？

Answer 1

1 删除嵌套的 IonRouterOutlet：您的应用程序中应该只有一个 IonRouterOutlet。 IonRouterOutlet 应包装 AppRoutes 中定义的路由。

2 正确的应用程序结构：以下是如何修改 App.tsx 和 AppRoutes.tsx 以消除嵌套的 IonRouterOutlet：

App.tsx：

import React from 'react';
import { IonApp } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import AppRoutes from './AppRoutes';

const App: React.FC = () => {
return (
    <IonApp>
        <IonReactRouter>
            <AppRoutes />
        </IonReactRouter>
    </IonApp>
);
}

export default App;

AppRoutes.tsx：

import React from 'react';
import { Route } from 'react-router-dom';
import { IonRouterOutlet } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';

import Dashboard from '@/pages/dashboard';
import SignUp from '@/components/onboarding/signup';
import Login from '@/components/onboarding/login';
import Landing from '@/components/onboarding/landing';

const AppRoutes: React.FC = () => {
return (
    <IonRouterOutlet>
        <Route exact path="/" component={Landing} />
        <Route exact path="/onboarding" component={Landing} />
        <Route exact path="/signup" component={SignUp} />
        <Route exact path="/login" component={Login} />
        <Route exact path="/dashboard" component={Dashboard} />
    </IonRouterOutlet>
);
}

export default AppRoutes;

变更摘要：

1. 删除了 AppRoutes.tsx 中额外的 IonRouterOutlet。这 App.tsx 中的 IonRouterOutlet 现在直接包含路由逻辑。

2. 确保IonReactRouter仅包裹主路由出口， 使其可用于导航。