Pass data between routes

[rajivharris]

How can I pass data between routes?
I have a form and the user navigates to the next screen to review the data?

I tried this but it is not working. (Also tried passing formData as a prop to ReviewForm.)

MainForm.tsx

const navigate = useNavigate({ from: '/' })

const handleFormSubmit = (formData) => {
    navigate({ to: '/review', params: { formData }}, )
 }

ReviewForm.tsx

export const Route = createFileRoute('/review')({
    component: ReviewForm
})

function ReviewForm() {

    const {formData} = Route.useParams()

    console.log(formData);
    
    return ( 
          <>Review Form</>
    )
}

[SeanCassiere]

The concept of params relates to path parameters. For example, in this path /posts/$postId, the param is the $postId. As such, by default, all the path parameters are string.
So this navigation would look like:

navigate({ to: '/posts/$postId', params: { postId: '123' } });

What you are looking for might be similar to the browser native window.history.pushState.
Tanstack Router does allow you to pass data between routes during navigation using the state field.

🚧 Tanstack Router currently does not provide any type-safety at runtime for this because of the challenges in data serialization for this magic field.

If you want to use it, you'll need to register the types for this HistoryState using module declaration.

// Register things for typesafety
declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router;
  }
  interface HistoryState {
    post?: { id: string; name: string };
  }
}

This declaration will allow you to optionally pass in key of post into the state field during any navigation.

<Link
  to='/posts/$postId'
  params={{ postId }}
  state={{ post: { id: '123'; name: 'foo' } }}
>
{"Go to post"}
</Link>

// or

const navigate = useNavigate();

navigate({
  to: '/posts/$postId',
  params: { postId }
  state: {{ post: { id: '123'; name: 'foo' } }}
})

Finally, you'll be able to access this state property using the useRouterState hook.

const state = useRouterState({ select: s => s.location.state });
//      ^ { post?: { id: string; name: string } }

💡 Remember! this state field is not actually type-safe at runtime and its data (as of now) will only be available in that particular tab's session.

[SalahAdDin]

@SalahAdDin this should have been fixed with #3119. Please try updating to the latest version and give it a shot.

Checked and it seams to fix the issue, thank you!

[xsjcTony]

@SeanCassiere This really helps, but just wondering is that possible to limit the state type to each route separately instead of globally? THanks.💚

[SeanCassiere]

@SeanCassiere This really helps, but just wondering is that possible to limit the state type to each route separately instead of globally? THanks.💚

Currently, no. It's global for now.

[Zen-cronic]

for typing the state from useLocation, see the docs change in this PR

[acidoxee]

Is there any plan to be able to define this state per route instead of globally? I believe this PR is exactly what I'd like instead.