primary-violet

Detecting a change in path on location change

I have the following setup:

  const matchRoute = useMatchRoute();
  const navigate = useNavigate();
  const location = useLocation({ select: l => l.pathname });

  const params = useMemo(() => {
    console.log(location);
    console.log(matchRoute({ to: '/teams/$teamId', fuzzy: true }));
    return matchRoute({ to: '/teams/$teamId', fuzzy: true });
  }, [location, matchRoute]);

  const matchRoute = useMatchRoute();
  const navigate = useNavigate();
  const location = useLocation({ select: l => l.pathname });

  const params = useMemo(() => {
    console.log(location);
    console.log(matchRoute({ to: '/teams/$teamId', fuzzy: true }));
    return matchRoute({ to: '/teams/$teamId', fuzzy: true });
  }, [location, matchRoute]);

The intent is that when I execute the following line:

navigate({ to: '/teams/$teamId/schedules', params: { teamId: 'newID' } });

navigate({ to: '/teams/$teamId/schedules', params: { teamId: 'newID' } });

I want to catch that navigation change and extract the new team id. However, the match route seems to 'lag' behind.
Example attached in image.

How can I get the most up to date team Id?

TanStack•10mo ago

primary-violet

Detecting a change in path on location change

I have the following setup:

  const matchRoute = useMatchRoute();
  const navigate = useNavigate();
  const location = useLocation({ select: l => l.pathname });

  const params = useMemo(() => {
    console.log(location);
    console.log(matchRoute({ to: '/teams/$teamId', fuzzy: true }));
    return matchRoute({ to: '/teams/$teamId', fuzzy: true });
  }, [location, matchRoute]);

  const matchRoute = useMatchRoute();
  const navigate = useNavigate();
  const location = useLocation({ select: l => l.pathname });

  const params = useMemo(() => {
    console.log(location);
    console.log(matchRoute({ to: '/teams/$teamId', fuzzy: true }));
    return matchRoute({ to: '/teams/$teamId', fuzzy: true });
  }, [location, matchRoute]);

The intent is that when I execute the following line:

navigate({ to: '/teams/$teamId/schedules', params: { teamId: 'newID' } });

navigate({ to: '/teams/$teamId/schedules', params: { teamId: 'newID' } });

I want to catch that navigation change and extract the new team id. However, the match route seems to 'lag' behind.
Example attached in image.

How can I get the most up to date team Id?

Detecting a change in path on location change

Similar Threads

Detecting a change in path on location change

Similar Threads

Similar Threads

Similar Threads