PD
🧩 Plasmo Developers•2w ago
gmasid

Simplifying react-router navigation based on storage changes

Hello guys, is there a way using Plasmo to navigate React-Router routes from a content script or background service worker? Example: 
const [item] = useStorage('item');
const previousItem = usePrevious(item);

const hasItemChanged = useMemo(() => {
  return item?.id !== previousItem?.id;
}, [item, previousItem]);

useLayoutEffect(() => {
  const isHomePage = location.pathname === '/';
  const isDetailsPage = location.pathname.endsWith('/details');

  if (!item && !isHomePage) navigate('/');
  if (item && isHomePage) navigate('/list');
  if (isDetailsPage && hasItemChanged) navigate('/list');
}, [item, navigate, location, hasItemChanged]);
const [item] = useStorage('item');
const previousItem = usePrevious(item);

const hasItemChanged = useMemo(() => {
  return item?.id !== previousItem?.id;
}, [item, previousItem]);

useLayoutEffect(() => {
  const isHomePage = location.pathname === '/';
  const isDetailsPage = location.pathname.endsWith('/details');

  if (!item && !isHomePage) navigate('/');
  if (item && isHomePage) navigate('/list');
  if (isDetailsPage && hasItemChanged) navigate('/list');
}, [item, navigate, location, hasItemChanged]);
In my Plasmo extension, the content script detects changes and sends them to the background service worker (BGSW). The BGSW then updates the item in storage. The code above handles routing based on the item state and whether it has changed. Is there a cleaner or more efficient way to handle this? Thanks!
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?