@assiri/ionic-react-router

Description

An effort to get React Router v6 working with the Ionic Framework

Background

The goal of this project is to utilize the most of the React-Router v6 patterns with as minimal abstraction as possible.

<IonRouterOutlet> is part of the base @ionic/react package creating tight coupling. Internally it wraps all the routes in a component called <StackManager>.

In this lib, <StackManager> provides the same functionality and is passed to the <IonRouteOutlet> elements via <IonNavigationContext> and within the <StackManager> is an outlet from react-router-dom

STATUS

This is not production ready yet.

It might be that the current @ionic/react-router only renders one outlet at a time where at this is following React Router v6 patterns where a nested outlet will render as well as the parent outlet.

Installation

npm install @assiri/ionic-react-router

Usage

import { IonPage } from '@ionic/react';

/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';

// Routing libs
import { IonNavigationContext } from '@assiri/ionic-react-router';
import {
  BrowserRouter,
  Navigate,
  Routes,
  Route,
  useLocation,
} from 'react-router-dom';

setupIonicReact();

export function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route
          element={
            <IonNavigationContext>
              <IonRouterOutlet />
            </IonNavigationContext>
          }
        >
          <Route
            path="/*"
            element={
              <IonPage>
                <h1>Main Page with Navigation</h1>
              </IonPage>
            }
          />
          <Route
            path="/profile/*"
            element={
              <IonPage>
                <h1>Profile</h1>
              </IonPage>
            }
          />
          <Route
            path="/profile/details"
            element={
              <IonPage>
                <h1>Profile Details</h1>
              </IonPage>
            }
          />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}