title: Ionic React - Navigate to a page when an FCM notification is tapped
body: <p>I am implementing FCM notifications in an Ionic React application. I am having trouble navigating to another page to display the notification details.</p>
  <p>I have created a <code>FCMService</code> class in my react App, and initialising this in the <code>index.ts</code> file.</p>
  <p>// FCMService.ts</p>
  <pre><code>export default class FCMService {
  
      public static Instance: FCMService;
  
      private _store: Store&lt;IAppState&gt;;
  
      constructor(store: Store&lt;IAppState&gt;) {
          this._store = store;
      }
  
      public static Initalise(store: Store&lt;IAppState&gt;) {
          if (!FCMService.Instance) {
              FCMService.Instance = new FCMService(store);
              FCMService.Instance.InitaliseFCM();
  
              FCMService.Instance._store.subscribe(() =&gt; { console.log(store.getState()) });
          } else {
              console.debug(&quot;FCM service already intialised. Please use FCMService.Instance&quot;);
          }
      }
  
      private InitaliseFCM() {
          // Request permission to use push notifications
          // iOS will prompt user and return if they granted permission or not
          // Android will just grant without prompting
          PushNotifications.requestPermission().then(result =&gt; {
              console.log(result);
              if (result.granted) {
                  // Register with Apple / Google to receive push via APNS/FCM
                  PushNotifications.register();
              } else {
                  // Show some error
              }
          });
  
          // On success, we should be able to receive notifications
          PushNotifications.addListener('registration', (token: PushNotificationToken) =&gt; {
              console.log(token);
              localStorage.setItem(&quot;FCM_TOKEN&quot;, token.value);
          }
          );
  
          // Some issue with our setup and push will not work
          PushNotifications.addListener('registrationError',
              (error: any) =&gt; {
                  console.log(error);
              }
          );
  
          // Show us the notification payload if the app is open on our device
          PushNotifications.addListener('pushNotificationReceived',
              (notification: PushNotification) =&gt; {
                  console.log(notification);
                  let data = notification.notification.data as INotificationData;
              }
          );
  
          // Method called when tapping on a notification
          PushNotifications.addListener('pushNotificationActionPerformed',
              (notification: PushNotificationActionPerformed) =&gt; {
                  console.log(notification);
                  let data = notification.notification.data as INotificationData;
  
                  this._store.dispatch(setNotificationActionCreator(data));
              }
          );
      }
  }
  </code></pre>
  <p>and then the index.ts</p>
  <pre><code>const store = configureStore();
  
  interface MainProps {
      store: Store&lt;IAppState&gt;;
  }
  
  FCMService.Initalise(store);
  ReactDOM.render(&lt;Provider store={store}&gt;&lt;App /&gt; &lt;/Provider&gt;, document.getElementById('root'));
  serviceWorker.unregister();
  </code></pre>
  <p>I even tried using the Redux store to save the notification on Tap - and then that would publish the notification change event (which might of worked - if I could access the <code>useHistory()</code> hook in the <code>App.tsx</code> file)</p>
  <p>This was my attempt at navigating via Redux store in <code>App.tsx</code></p>
  <pre><code>const App: React.FC&lt;IProps&gt; = ({ getCompanies, getUser, notification }) =&gt; {
    console.log('app');
    console.log(process.env);
  
      const history = useHistory();
      if(notification){
          history.push(`/page/plot-position/{notification.id}`);
      }
  
    return (
      &lt;IonApp&gt;
        &lt;IonReactRouter&gt;
          &lt;IonSplitPane contentId=&quot;main&quot; when=&quot;false&quot;&gt;
  
            &lt;Menu /&gt;
  
            &lt;IonRouterOutlet id=&quot;main&quot;&gt;
              &lt;Route path=&quot;/login&quot; component={LoginPage} exact /&gt;
              &lt;PrivateRoute path=&quot;/page/plot-position/:notificationId/&quot; component={PlotPositionPage} exact /&gt;
              &lt;Redirect from=&quot;/&quot; to=&quot;/login&quot; exact /&gt;
            &lt;/IonRouterOutlet&gt;
  
          &lt;/IonSplitPane&gt;
        &lt;/IonReactRouter&gt;
      &lt;/IonApp&gt;
    );
  };
  
  const mapStateToProps = (store: IAppState) =&gt; {
    return {
      user: store.user.user as UserDTO,
      notification: store.notificationState.notification
    };
  };
  
  const mapDispatchToProps = (dispatch: any) =&gt; {
    return {
      getCompanies: () =&gt; dispatch(getCompaniesStartActionCreator()),
      getUser: () =&gt; dispatch(getUserStartActionCreator())
    }
  };
  
  export default connect(mapStateToProps, mapDispatchToProps)(App);
  </code></pre>