以编程方式导航Ionic-React

import React from 'react';
import { IonButton, IonContent, IonPage } from '@ionic/react';
import { useIonRouter } from '@ionic/react-router';

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

  const navigateToAbout = () => {
    router.push('/about');
  };

  return (
    <IonPage>
      <IonContent>
        <IonButton onClick={navigateToAbout}>Go to About Page</IonButton>
      </IonContent>
    </IonPage>
  );
};

export default Home;

import { IonApp, IonRouterOutlet } from '@ionic/react';
import { BrowserRouter as Router } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

const App: React.FC = () => {
  return (
    <IonApp>
      <Router>
        <IonRouterOutlet>
          <Route path="/" exact component={Home} />
          <Route path="/about" component={About} />
        </IonRouterOutlet>
      </Router>
    </IonApp>
  );
};

export default App;

import { lazy, Suspense } from 'react';

const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));

// 在路由配置中使用懒加载
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />