Use router.subscribe to detect nav direction between parent and child

I need the navigation direction for a page transition animation.

1. Is

router.subscribe

router.subscribe

stable-ish API? It's not mentioned in any documentation.
2. Is it the best way to detect whether or not navigation is about to happen and the direction between parent and child routes?
3. Can I call

router.subscribe

router.subscribe

inside a functional component? Will it remove and re-add the event listener during re-renders? Or is this a memory leak? I need to call the dispatch function provided by the

useState

useState

hook inside the event listener.

I will be performing the detection like so:

const router = useRouter();
const [direction, setDirection] = useState(-1);
router.subscribe(
  'onBeforeLoad',
  ({ pathChanged, toLocation, fromLocation }) => {
    if (!pathChanged) return;

    if (
      toLocation.pathname.length < fromLocation.pathname.length &&
      fromLocation.pathname.startsWith(toLocation.pathname)
    )
      // navigating up a level
      setDirection(1);
  },
);

const router = useRouter();
const [direction, setDirection] = useState(-1);
router.subscribe(
  'onBeforeLoad',
  ({ pathChanged, toLocation, fromLocation }) => {
    if (!pathChanged) return;

    if (
      toLocation.pathname.length < fromLocation.pathname.length &&
      fromLocation.pathname.startsWith(toLocation.pathname)
    )
      // navigating up a level
      setDirection(1);
  },
);

TanStack•3y ago•

7 replies

tricky-teal

Use router.subscribe to detect nav direction between parent and child

I need the navigation direction for a page transition animation.

1. Is

router.subscribe

router.subscribe

stable-ish API? It's not mentioned in any documentation.
2. Is it the best way to detect whether or not navigation is about to happen and the direction between parent and child routes?
3. Can I call

router.subscribe

router.subscribe

inside a functional component? Will it remove and re-add the event listener during re-renders? Or is this a memory leak? I need to call the dispatch function provided by the

useState

useState

hook inside the event listener.

I will be performing the detection like so:

const router = useRouter();
const [direction, setDirection] = useState(-1);
router.subscribe(
  'onBeforeLoad',
  ({ pathChanged, toLocation, fromLocation }) => {
    if (!pathChanged) return;

    if (
      toLocation.pathname.length < fromLocation.pathname.length &&
      fromLocation.pathname.startsWith(toLocation.pathname)
    )
      // navigating up a level
      setDirection(1);
  },
);

const router = useRouter();
const [direction, setDirection] = useState(-1);
router.subscribe(
  'onBeforeLoad',
  ({ pathChanged, toLocation, fromLocation }) => {
    if (!pathChanged) return;

    if (
      toLocation.pathname.length < fromLocation.pathname.length &&
      fromLocation.pathname.startsWith(toLocation.pathname)
    )
      // navigating up a level
      setDirection(1);
  },
);

Use router.subscribe to detect nav direction between parent and child

Similar Threads

Use router.subscribe to detect nav direction between parent and child

Similar Threads

Similar Threads

Similar Threads