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?

Does this answer your question? [How to pass params with history.push/Link/Redirect in react-router v4?](https://stackoverflow.com/questions/44121069/how-to-pass-params-with-history-push-link-redirect-in-react-router-v4) — Aaron Saunders, Nov 08 '20 at 00:34
This is an ionic specific example also: https://stackoverflow.com/questions/60689482/react-ionic-5-how-to-pass-object-from-app-component-to-tab-component/60713577#60713577 — Aaron Saunders, Nov 08 '20 at 00:36
Thanks for your advices. I tried the solution from the second link but I had problems with the context. The solution by TalOrlanczyk worked for me. — Jule Wolf, Nov 09 '20 at 14:52

TalOrlanczyk · Accepted Answer · 2020-11-08T21:26:51.210

4

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

edited Nov 08 '20 at 21:26

answered Nov 07 '20 at 18:15

TalOrlanczyk

1,205
7
21

Thanks for your answer, I updated my question with the error I get. – Jule Wolf Nov 07 '20 at 19:03
try to add generic type like this const history = useHistory(); as I see from my IDE it's generic type unknow as default and this is how you can change it. and I add a useful link that will help you in my answer – TalOrlanczyk Nov 08 '20 at 21:24

How to pass data between pages without URL Parameters

1 Answers1