How do I access the state: data of navigate(...) from the destination route component?

[nyngwang]

As title. From the documentation, it seems that I can set state for navigate from useNavigate(). But it's unclear how to access the data from the destination route /checkout component. Any idea?

function ShoppingCart() {
  const navigate = useNavigate()


  async function onCartCheck() {
    const data = await cartService.cartCheck()
    navigate({
      to: '/checkout',
      state: data
    })
  }

  return <>
    <div className='px-[20px] py-[20px] w-[800px] flex flex-col items-end rounded-sm bg-gray-100'>
      <div className='w-full'>
        <DisplayShoppingCart />
        <hr className='my-[20px]'/>
      </div>
      <Button
        type="submit"
        onClick={onCartCheck}
      >確認訂單</Button>
    </div>
  </>
}

[tykhan]

You can do that with useRouterState hook.

const  { location } = useRouterState();
location.state // here is your state

[nyngwang]

Could you provide a link to the source/docs? I'm taking notes, thank you!

[SeanCassiere]

@nyngwang
The correct way to access the state field from the Router's state is detailed here in this discussion.