TanStack•3y ago•

15 replies

ordinary-sapphire

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

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'

from: '/posts/$postId'

? To me

from

from

seemed to be a root for the

to

to

part of the query, like if

from=/api/v1

from=/api/v1

and

to=query

to=query

then the request would go to

/api/v1/query

/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 ...

TanStack•3y ago•

15 replies

ordinary-sapphire

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

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'

from: '/posts/$postId'

? To me

from

from

seemed to be a root for the

to

to

part of the query, like if

from=/api/v1

from=/api/v1

and

to=query

to=query

then the request would go to

/api/v1/query

/api/v1/query

, but this example doesn't make any sense to me at the moment.

Navigation | TanStack Router Docs

Why to use `from` in navigations

Similar Threads

Why to use `from` in navigations

Similar Threads

Similar Threads

Similar Threads