inadequate-blush

How to invalidate route from the __root.tsx?

Hello, I have PWA background-sync mechanism in my app and I sent a message with some data from service-worker to the app. I'd like to handle these messages in one listener, in __root.tsx. When I go to

/about

/about

page and there's no internet connection, I render

ErrorComponent

ErrorComponent

but I'd like to reload this page once I'm online again (so it's when I get message from sw)

That's what I tried:

const router = useRouter();
useEffect(() => {
  if (navigator.serviceWorker) {
    navigator.serviceWorker.addEventListener("message", (event) => {
      if ("type" in event.data && event.data.type === "REPLAY_SUCCESS") {
        router.invalidate(); // Here I'd like to invalidate specific route, based on i.e. event.data.pageUrl
      }
    });
  }
}, [router]);

const router = useRouter();
useEffect(() => {
  if (navigator.serviceWorker) {
    navigator.serviceWorker.addEventListener("message", (event) => {
      if ("type" in event.data && event.data.type === "REPLAY_SUCCESS") {
        router.invalidate(); // Here I'd like to invalidate specific route, based on i.e. event.data.pageUrl
      }
    });
  }
}, [router]);

But this code doesn't work.
Any ideas how could I achieve what I want?
Thanks!

TanStack•2y ago

inadequate-blush

How to invalidate route from the __root.tsx?

/about

/about

page and there's no internet connection, I render

ErrorComponent

ErrorComponent

but I'd like to reload this page once I'm online again (so it's when I get message from sw)

That's what I tried:

const router = useRouter();
useEffect(() => {
  if (navigator.serviceWorker) {
    navigator.serviceWorker.addEventListener("message", (event) => {
      if ("type" in event.data && event.data.type === "REPLAY_SUCCESS") {
        router.invalidate(); // Here I'd like to invalidate specific route, based on i.e. event.data.pageUrl
      }
    });
  }
}, [router]);

const router = useRouter();
useEffect(() => {
  if (navigator.serviceWorker) {
    navigator.serviceWorker.addEventListener("message", (event) => {
      if ("type" in event.data && event.data.type === "REPLAY_SUCCESS") {
        router.invalidate(); // Here I'd like to invalidate specific route, based on i.e. event.data.pageUrl
      }
    });
  }
}, [router]);

But this code doesn't work.
Any ideas how could I achieve what I want?
Thanks!

How to invalidate route from the __root.tsx?

Similar Threads

How to invalidate route from the __root.tsx?

Similar Threads

Similar Threads

Similar Threads