Ionic React：点击 FCM 通知时 useHistory().push() 不起作用

Question

所以我设置了推送通知处理程序：

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]);
}

来自我的 App.tsx:

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

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

  useInitializePushNotification();

  ....

nav.push(url) 正在更改我的 url，但路由不起作用。即使更改导航后页面也不会更改。仅当我在 background 模式下点击来自 FCM 的通知时才会发生这种情况，如果我的应用程序处于 foreground.

手动 nav.push() 工作

我该如何解决这个问题？

Answer 1

经过一番折腾，我终于找到了解决办法。我使用 Redux 来正确导航它。

在我的 pushNotificationActionPerformed 活动中：

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

我发送一个 url 在 App.tsx 中触发。

这是我的 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]);

对于那些不使用 Redux 的人来说，这个解决方案并不理想，但这是我找到工作的唯一方法。我不确定此解决方案是否适用于 context.

Ionic React：点击 FCM 通知时 useHistory().push() 不起作用

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

android

ios

firebase

reactjs

ionic-framework