Ionic React: useHistory().push() not working when tapping FCM notification-CodePudding

So I setup my push notification handler:

export function useInitializePushNotification() {

  const nav = useHistory();

  useEffect(() => {
    PushNotifications.removeAllListeners().then(() => {
      ....

      // Method called when tapping on a notification
      PushNotifications.addListener('pushNotificationActionPerformed',
        (notification: ActionPerformed) => {
          let data = notification.notification.data;
          let url = `/application?applicationId=${data.applicationId}&app=${data.applicationName}&chatRoomId=${data.chatRoomId}&chatRoomName=${data.chatRoomName}&displayChat=true`.replace(/ /g, '-');
          nav.push(url);
        }
      );
    });

    return () => {
      PushNotifications.removeAllListeners();
    }
  }, [nav]);
}

From my App.tsx:

const App: React.FC = () => {

  const dispatch = useAppDispatch();
  const { setAuth } = useAuth(dispatch);
  const [initialized, setInitialized] = useState(false);

  useInitializePushNotification();

  ....

nav.push(url) is changing my url, but routing does not work. The page does not change even after the navigation is changed. This happens only if I tap the notification from FCM on background mode, manual nav.push() is working if my app is in foreground.

How can I fix this?

CodePudding user response：

After struggling a lot, I finally found the solution. I use Redux to properly navigate it.

In my pushNotificationActionPerformed event:

    PushNotifications.addListener('pushNotificationActionPerformed',
      (notification: ActionPerformed) => {
        let data = notification.notification.data;
        let url = `/owner/support?id=${data.chatRoomId}&name=${data.chatRoomName}`;
        dispatch(setNeedNavigateTo(url));
      }
    );

I dispatch a url to be triggered in App.tsx.

This is my App.tsx:

  const needNavigateTo = useAppSelector((state) => state.support.needNavigateTo);

  const nav = useHistory();

  useEffect(() => {
    if (nav && needNavigateTo) {
      nav.push(needNavigateTo); //this works
      setNeedNavigateTo(undefined); //set the url to undefined (resetting)
    }
  }, [nav, needNavigateTo]);

This solution is not ideal for those who do not use Redux, but this is the only way I found work. I am not sure if this solution work with context.