passive-yellow

Why to use `from` in navigations

Hi! I never used TanStack Router before, and now I am reading through the docs now and trying to understand why from is used when navigating. Take this example from docs https://tanstack.com/router/latest/docs/framework/react/guide/navigation#usenavigate:

function Component() {
  const navigate = useNavigate({ from: '/posts/$postId' })

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

    const response = await fetch('/posts', {
      method: 'POST',
      body: JSON.stringify({ title: 'My First Post' }),
    })

    const { id: postId } = await response.json()

    if (response.ok) {
      navigate({ to: '/posts/$postId', params: { postId } })
    }
  }
}

function Component() {
  const navigate = useNavigate({ from: '/posts/$postId' })

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

    const response = await fetch('/posts', {
      method: 'POST',
      body: JSON.stringify({ title: 'My First Post' }),
    })

    const { id: postId } = await response.json()

    if (response.ok) {
      navigate({ to: '/posts/$postId', params: { postId } })
    }
  }
}

What happens if we don't use from: '/posts/$postId'? To me from seemed to be a root for the to part of the query, like if from=/api/v1 and to=query then the request would go to /api/v1/query, but this example doesn't make any sense to me at the moment.

Navigation | TanStack Router Docs

Everything is Relative Believe it or not, every navigation within an app is relative, even if you aren't using explicit relative path syntax (../../somewhere). Any time a link is clicked or an imperative navigation call is made, you will always have an origin path and a destination path which means you are navigating from one route to another ...

10 Replies

rising-crimson•2y ago

from is only used to get typesafety. it is not used at runtime .

passive-yellowOP•2y ago

Then why the two links below point to different locations?

    <Link from="/root1" to="page" >link</Link>
    <Link from="/root2" to="page" >link</Link>

    <Link from="/root1" to="page" >link</Link>
    <Link from="/root2" to="page" >link</Link>

rising-crimson•2y ago

where is this copied from?

passive-yellowOP•2y ago

I just wrote these

rising-crimson•2y ago

hm so do they behave differently at runtime? could be you are using a relative link here. then from+to are concatenated to form the real "to" but also in this case I think the concatenation happens at runtime and it is not based on the from value but instead uses the current route

rising-crimson•2y ago

https://tanstack.com/router/v1/docs/framework/react/guide/navigation#everything-is-relative

Navigation | TanStack Router Docs

passive-yellowOP•2y ago

In my question, there is a link to this documentation page (same as you just linked, with a different anchor), to the concrete example. I see from my experiments that from is concatenated with to when to is not an absolute path. But I don't understand why in the example they defined from , when they also use an absolute to link. It might be so that they wanted to show that you can provide from when creating useNavigate, but I don't see other reasons

rising-crimson•2y ago

thanks for explaining in detail. yes, in this example it does not really help much to add the from property here (aside from showing that it can be inserted in the hook call directly). usually you add the from property so you can benefit from the typesafety. e.g. router finds out if path params need to be specified or can be taken over from the "from" route.

passive-yellowOP•2y ago

Interesting, the point about typesaefe links and specifying params makes sense. About the example - I think they just chose a bad place to demonstrate this usage of from Thanks!

rising-crimson•2y ago

feel free to open a PR to enhance the docs.

Gaming

Programming

Why to use `from` in navigations

Did you find this page helpful?