Ionic integrates with React Router to provide stack-based navigation that feels native on mobile.

Basic Routing Setup 

  import { IonApp, IonRouterOutlet, setupIonicReact } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import { Route, Redirect } from 'react-router-dom';
import Home from './pages/Home';
import Details from './pages/Details';

setupIonicReact();

function App() {
    return (
        <IonApp>
            <IonReactRouter>
                <IonRouterOutlet>
                    <Route exact path="/home" component={Home} />
                    <Route exact path="/details/:id" component={Details} />
                    <Route exact path="/">
                        <Redirect to="/home" />
                    </Route>
                </IonRouterOutlet>
            </IonReactRouter>
        </IonApp>
    );
}

Use React Router’s Link or the useHistory hook:

  import { Link } from 'react-router-dom';
import { useHistory } from 'react-router-dom';

function Home() {
    const history = useHistory();

    return (
        <>
            <Link to="/details/42">Go to Details</Link>
            <IonButton onClick={() => history.push('/details/99')}>
                Programmatic Navigation
            </IonButton>
        </>
    );
}

Tab Navigation 

  import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/react';
import { home, settings } from 'ionicons/icons';

<IonTabs>
    <IonRouterOutlet>
        <Route path="/tabs/home" component={HomePage} />
        <Route path="/tabs/settings" component={SettingsPage} />
    </IonRouterOutlet>
    <IonTabBar slot="bottom">
        <IonTabButton tab="home" href="/tabs/home">
            <IonIcon icon={home} /><IonLabel>Home</IonLabel>
        </IonTabButton>
        <IonTabButton tab="settings" href="/tabs/settings">
            <IonIcon icon={settings} /><IonLabel>Settings</IonLabel>
        </IonTabButton>
    </IonTabBar>
</IonTabs>

Page Structure

Every routable screen should use IonPage:

  import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/react';

const Details: React.FC = () => (
    <IonPage>
        <IonHeader>
            <IonToolbar>
                <IonButtons slot="start">
                    <IonBackButton defaultHref="/home" />
                </IonButtons>
                <IonTitle>Details</IonTitle>
            </IonToolbar>
        </IonHeader>
        <IonContent className="ion-padding">
            <p>Detail content here</p>
        </IonContent>
    </IonPage>
);

Route Parameters 

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

function Details() {
    const { id } = useParams<{ id: string }>();
    return <p>Item ID: {id}</p>;
}

Use useIonViewWillEnter to refresh data when navigating back.

Next: access native device features with Capacitor.