Ionic React: Navigating from page to page

Photo by Fili Santillán on Unsplash

Ionic React is a little bit different. It really is. It looks like your typical React site, but with Ionic, it has a new superpower. It does not look like your typical TSX fare to build an Ionic React app.

I am not trying to rile up any sentiments towards React or any other framework, but in this write up, I will describe how easy it is to route from one page to another with Ionic React. For this application, I will be using Ionic React with the following versions:

• @ionic/react: ^8.8.0
• @ionic/react-router: ^8.8.0
• React: ^18

A few things before we begin: Before we begin, one of the most important things to understand in a typical Ionic React project is to wrap a page in <IonPage>. This is important because without <IonPage>, for some reason, a page that you have navigated to will not be recognised as a page. Ionic won’t apply the right styles, animations, or life cycle events, and your navigation stack will feel broken.

Step 1: Create Your Pages

Let’s keep it simple. We’ll make two pages: a Home page and a Detail page.

Create a new folder src/pages (if it doesn’t exist) and add these two files.

Home.tsx

import { IonContent…