For AI agents: the complete documentation index is available at /toi/llms.txt, the full documentation bundle is available at /toi/llms-full.txt, and this page is available as Markdown at /toi/guide/basic/navigation.md.
toi
  • English

      • Closing on Navigation

      Navigating to another page doesn't settle a pending request on its own. Components rendered by toi live in ToiHost, which usually sits outside the routed part of your tree (see Mounting the Host), so they stay mounted across page transitions — a confirm dialog opened on one page is still there after the user moves to the next.

      Whether that's what you want depends on the component. A toast announcing a saved item can reasonably outlive the page it was triggered from. A confirm dialog tied to something on the previous page usually can't, and should be closed by calling reject() — the abandoned-request case described in Resolving.

      To close a component when the user navigates away, listen for the Navigation API's currententrychange event, which fires after the current history entry has changed, and call reject() from it:

      import { useEffect } from 'react';

import type { ToiProps } from '@praha/toi';
import type { FC } from 'react';

const Confirm: FC<ToiProps<boolean>> = ({ ref, resolve, reject }) => {
  useEffect(() => {
    const abandon = () => reject();
    navigation.addEventListener('currententrychange', abandon);
    return () => navigation.removeEventListener('currententrychange', abandon);
  }, [reject]);

  return (
    <dialog ref={ref} open>
      <button onClick={() => resolve(true)}>OK</button>
      <button onClick={() => resolve(false)}>Cancel</button>
    </dialog>
  );
};

      The useNavigationEventListener hook from @praha/react-kit wraps this up more concisely. It subscribes for the lifetime of the component and always calls the latest listener without re-subscribing:

      import { useNavigationEventListener } from '@praha/react-kit';

import type { ToiProps } from '@praha/toi';
import type { FC } from 'react';

const Confirm: FC<ToiProps<boolean>> = ({ ref, resolve, reject }) => {
  useNavigationEventListener({
    type: 'currententrychange',
    listener: () => reject(),
  });

  return (
    <dialog ref={ref} open>
      <button onClick={() => resolve(true)}>OK</button>
      <button onClick={() => resolve(false)}>Cancel</button>
    </dialog>
  );
};