Multi-page tour

Steps name a route. The provider navigates for you and, with persist, a reload resumes the same step.

Page one

This paragraph is step two's target.

Step four comes back here.

Try it: start the tour, press Next until it moves to page two, then reload the browser. The step reappears because the provider uses persist={sessionStorage}.

Route-aware steps

// Registered in the root layout, so it outlives page changes.
const steps: SpotlightStep[] = [
  { id: 'first', route: '/examples/multi-page', target: '[data-tour="mp-first"]', title: 'Page one', content: '…' },
  { id: 'second', route: '/examples/multi-page/second', target: '[data-tour="mp-second"]', title: 'Page two', content: '…' }
];

// The provider calls navigate(route) when a step lives elsewhere,
// and persist keeps the position across reloads.
<SpotlightProvider persist={sessionStorage} navigate={(path) => goto(path)}>