Error: RouteComponentProps issue in App.tsx

Ionic Framework Ionic React
1

…I am updating my app from Ionic 4 to Ionic 7 (yes it has been a while)…

Getting following error I cannot figure out:

Screenshot 2024-03-22 at 14.33.26
Screenshot 2024-03-22 at 14.33.261122×404 60.9 KB

I have following this guide to a T: Intro to Ionic React Quickstart Using Ionic CLI: React Basics (still gives me this error)

_
My code:

Home.tsx

import { IonIcon, IonFabButton, IonFab, IonList, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import './Home.css';
import { add } from 'ionicons/icons';
import { RouteComponentProps, withRouter } from "react-router";
import { useHistory } from 'react-router';

const Home: React.FC<RouteComponentProps> = () => {
  const history = useHistory();
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Blank</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Blank2</IonTitle>
          </IonToolbar>
        </IonHeader>
        <ExploreContainer />
      </IonContent>
      <IonContent>
        <IonList>...</IonList>
        <IonFab vertical="bottom" horizontal="end" slot="fixed">
          <IonFabButton onClick={() => history.push('/new')}>
            <IonIcon icon={add} />
          </IonFabButton>
        </IonFab>
      </IonContent>
    </IonPage>
  );
};

export default Home;

App.tsx

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

import Home from './pages/Home';

setupIonicReact();

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
        <Route exact path="/home">
          <Home />
        </Route>
        <Route exact path="/">
          <Redirect to="/home" />
        </Route>
      </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
);

export default App;
2

Please don’t screenshot errors. Copy-and-paste the text instead. If you screenshot an error, it won’t show up in search, so people in the future who ask the same question won’t be able to find it, and they will ask the same question.

There are a couple issues with your code.

First, in App.tsx, the tutorial you linked to renders the routes like this:

<Route path="/home" component={Home} />

You are rendering your routes like this:

<Route exact path="/home">
  <Home />
</Route>

These are not the same!

With the former, react-router is rendering the route, so you will get RouteComponentProps. But with the latter, react-router is not rendering the route, so you don’t get the props. You can also use the latter method, but in that case, you need to remove the RouteComponentProps from the component definition.

Second, in Home.tsx, you have two IonContent. You only want one ion-content per page, as shown in the tutorial. Also see the docs on ion-content:

There should only be one content in a single view.