Use this code to create a separate file with all the routes for your ionic app.

1. Create a Routes.tsx file and add the following code with your routes

import { IonRouterOutlet } from "@ionic/react";
import { Redirect, Route } from "react-router";
import { createOutline, createSharp } from "ionicons/icons";

// ROUTES
import Home from "./pages/Home";
import Quiz from "./pages/Quiz";
 
export const Routes: React.FC = () => {
  const mainUrl = "/";
  const programRoutes = [
    // Add more program routes here as needed

    { path: mainUrl, component: Home },
    {
      path: "/home",
      component: Home,
      title: "Home",
      url: "/home",
      iosIcon: createOutline,
      mdIcon: createSharp,
    },
    {
      path: "/quiz",
      component: Quiz,
      title: "Quiz",
      url: "/quiz",
      iosIcon: createOutline,
      mdIcon: createSharp,
    },
    .....
  ];
  return (
    <IonRouterOutlet id="main">
      <Routes />

      <Route path="/" exact={true}>
        <Redirect to={mainUrl} />
      </Route>
      {programRoutes.map((route: any, index: number) => (
        <Route
          key={index}
          path={route.path}
          exact={true}
          component={route.component}
        />
      ))}
    </IonRouterOutlet>
  );
};
export default Routes;

2. Open App.tsx and update to add the Routes component

import { Routes } from './routes';
...
const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
        <Routes />
      </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
);

I've implement also with context provider for global access on app: /g/SCHOOL/Apps/84-words-kinder-v2