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.

[rajivharris]

Thanks @SeanCassiere for quick reply, it worked !!

[SalahAdDin]

@SeanCassiere you are the MVP!

[SalahAdDin]

I have an issue with it regarding to the types:

    navigate({
      to: '/edit/$id',
      params: { id: todo.id },
      state: { todo },
    })

Error:

Type '{ todo: Todo; }' is not assignable to type 'true | NonNullableUpdater<HistoryState> | undefined'.
  Property '__TSR_index' is missing in type '{ todo: Todo; }' but required in type 'HistoryState'.ts(2322)
index.d.ts(43, 5): '__TSR_index' is declared here.
link.d.ts(51, 5): The expected type comes from property 'state' which is declared here on type 'NavigateOptions<Router<RootRoute<undefined, {}, AnyContext, AnyContext, {}, () => { crumb: string; }, readonly [Route<RootRoute<undefined, {}, AnyContext, AnyContext, {}, () => { ...; }, unknown, unknown>, ... 11 more ..., unknown>, Route<...>], unknown>, ... 4 more ..., Record<...>>, string, "/edit/$id", string, "">'
#008060

I fixed by: state: { todo, __TSR_index: 0 },

@SeanCassiere Is it the best way?

[SeanCassiere]

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

[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!