How to pass data between pages without URL Parameters

Question

I'm wondering how I can pass non-string data between two pages in Ionic 5 using ReactRouter.

All solutions I could find used Ionic and Angular or just passed one string as URL parameter.

These are my components so far:

App.tsx

   const App: React.FC = () => {
      return (
        <IonApp>
          <IonReactRouter>
            <IonSplitPane contentId="main">
              <Menu />
              <IonRouterOutlet id="main">
                <Route path="/page/Home" component={Home} exact />
                <Route path="/page/DataEntry" component={DataEntry} exact />
                <Route path="/page/Request" component={Request} exact />
                <Route path="/page/ResultMap" component={ResultMap} exact />
                <Redirect from="/" to="/page/Home" exact />
              </IonRouterOutlet>
            </IonSplitPane>
          </IonReactRouter>
        </IonApp>
      );
    };

Page 1 here collects user input data (strings, objects, arrays) and I want to call the route '/page/ResultMap' on Button click and pass the data, so the next page can handle it:

  <IonGrid>
  <IonRow>
    <IonCol class="ion-text-center">
     <IonButton text-center="ion-text-center" color="primary" size="default" routerLink='/page/ResultMap'>Erkunden!</IonButton> 
    </IonCol>
  </IonRow>
</IonGrid>

Page 2, which should receive the Data:

const ResultMap: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonButtons slot="start">
            <IonMenuButton />
          </IonButtons>
          <IonTitle>Map</IonTitle>
        </IonToolbar>
      </IonHeader>

      <IonContent fullscreen>
      </IonContent>
    </IonPage>
  );
};

I understand the React principle about props and state, I just dont know how to combine it with Ionic in this case.

I appreciate your help!

Edit:

As suggested I changed the button onClick like this:

     <IonButton text-center="ion-text-center" color="primary" size="default" onClick={e => {
       e.preventDefault();
       history.push({
         pathname: '/page/ResultMap',
         state: { time: transportTime }
       })}}>

And try to receive the data on the ResultMap page like this:

let time = history.location.state.time;

But I get the error:

Object is of type 'unknown'.  TS2571

     7 |   let history = useHistory();
     8 | 
  >  9 |   let time = history.location.state.time;
       |              ^

How do I access the passed object on the new page?

Answer 1

as for react-router I know you can use this:

history.push({
  pathname: '/template',
  state: { detail: response.data }
})

in this situation you can pass data without URL Params can also use history.replace if you redirect and want the back button work properly to the end user

and for the history do the following

let history = useHistory();

Check this link for a great understand how to implement the useHistory type