T
TanStack•7mo ago
painful-plum

Programatically updating a searchParam

How can I programatically update a searchParam so that it re-runs the useSearch hook to update the value in the component? const { fooBarId } = useSearch({ from: '/foor/$barId/_layout' });
1 Reply
sharp-indigo
sharp-indigo•7mo ago
you navigate 
import { createFileRoute, useNavigate } from '@tanstack/react-router'

export const Route = createFileRoute('/blog/$id')({
  component: RouteComponent,
})

function RouteComponent() {
  const navigate = useNavigate()
  const { id } = Route.useParams()
  return <div>
    <h1>Blog page {id}</h1>
    <form action={(form) => navigate({ to: '/blog/$id', params: { id: form.get('id')!.toString() } })}>
      <input type="text" name='id' placeholder='Page ID' />
      <button type='submit'>Go to page</button>
    </form>
  </div>
}
import { createFileRoute, useNavigate } from '@tanstack/react-router'

export const Route = createFileRoute('/blog/$id')({
  component: RouteComponent,
})

function RouteComponent() {
  const navigate = useNavigate()
  const { id } = Route.useParams()
  return <div>
    <h1>Blog page {id}</h1>
    <form action={(form) => navigate({ to: '/blog/$id', params: { id: form.get('id')!.toString() } })}>
      <input type="text" name='id' placeholder='Page ID' />
      <button type='submit'>Go to page</button>
    </form>
  </div>
}
@ulriken_ id will change upon navigation

Did you find this page helpful?