离子框架react中的导航问题

npm install @ionic/react @ionic/react-router react-router-dom

import React from 'react';
import { IonApp, IonRouterOutlet, IonButton, IonContent } from '@ionic/react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

const Home = () => <IonContent><h1>Home Page</h1></IonContent>;
const About = () => <IonContent><h1>About Page</h1></IonContent>;

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

export default App;

const Home = () => (
  <IonContent>
    <h1>Home Page</h1>
    <IonButton routerLink="/about">Go to About</IonButton>
  </IonContent>
);

import React, { useState } from 'react';
import { IonApp, IonNav, IonButton, IonContent } from '@ionic/react';

const Home = () => <IonContent><h1>Home Page</h1></IonContent>;
const About = () => <IonContent><h1>About Page</h1></IonContent>;

const App = () => {
  const [root, setRoot] = useState(Home);

  return (
    <IonApp>
      <IonNav root={root} />
      <IonButton onClick={() => setRoot(About)}>Go to About</IonButton>
    </IonApp>
  );
};

export default App;

import React from 'react';
import { IonApp, IonRouterOutlet, IonButton, IonContent } from '@ionic/react';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';

const Home = () => <IonContent><h1>Home Page</h1></IonContent>;
const About = () => <IonContent><h1>About Page</h1></IonContent>;

const App = () => (
  <IonApp>
    <Router>
      <IonRouterOutlet>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </IonRouterOutlet>
    </Router>
    <IonButton routerLink="/about">Go to About</IonButton>
  </IonApp>
);

export default App;