TourRoutePrompt

TourRoutePrompt is the user-facing prompt for multi-page tours when autoNavigate is disabled. The tour runtime determines that the next step lives on a different route; instead of jumping silently, this component asks the user whether to continue.

It renders null when no navigation is pending — drop it into your layout once and let the tour state decide when it appears.

Usage

import { TourRoutePrompt } from '@tour-kit/react';
import { useNextAppRouter } from '@tour-kit/react';

function AppShell({ children }) {
  const router = useNextAppRouter();
  return (
    <>
      {children}
      <TourRoutePrompt router={router} />
    </>
  );
}

Pair with <MultiTourKitProvider autoNavigate={false}> so the runtime defers the navigation decision to the prompt.

Custom Copy

<TourRoutePrompt
  router={router}
  message={(route, stepTitle) => `Continue to ${stepTitle ?? route}?`}
  buttonText="Let's go"
  cancelText="Skip the rest"
  onNavigate={(route) => analytics.track('tour_navigate', { route })}
  onSkip={() => analytics.track('tour_skip_at_route')}
/>

Props

Related

• <MultiTourKitProvider> — the provider whose autoNavigate={false} opts in to this prompt.
• useTourRoute — the hook this component reads pending-navigation state from.
• Router adapters — useNextAppRouter, useNextPagesRouter, useReactRouter for the router prop.
• Router integration guide — patterns for multi-page tours end-to-end.
• Cross-page tour example — see this prompt in a working flow.