TanStack / TanStack/router

UseNavigate search functional syntax missing type errors

Open
#6,264 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

types
Dominant language
TypeScript
Stars
15.1k
Forks
1.9k
Avg merge
1d 20h
Merged PRs (30d)
143

Description

Which project does this relate to?

Start

Describe the bug

If I use the functional syntax of the navigate function, it does not give me type safety for wrong parameters.

I would expect most people to use this syntax most of the time, when there are multiple url parameters.

Steps to Reproduce the Bug or Issue

https://stackblitz.com/edit/github-rdremnpn?file=src%2Froutes%2Findex.tsx

import { createFileRoute, Link } from '@tanstack/react-router'
import z from 'zod';

const paramsSchema = z.object({
  query: z.string().optional(),
});

export const Route = createFileRoute('/test')({
  validateSearch: paramsSchema,
  component: RouteComponent,
})

function RouteComponent() {
  const navigate = Route.useNavigate();

  const test = () => {
    navigate({ search: { query: "bro", lmao: "squiggly here" } })
    navigate({ search: (prev) => ({ ...prev, query: "bro", lmao: "no squiggly here", }) })
  }

  return <div>
    i cant find the syntax for links...
  </div>
}
Expected behavior

lmao gets marked as an error just as it does above

Platform
  • Router / Start Version: 1.145.0

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by running the linked StackBlitz reproduction in src/routes/index.tsx and tracing the Route.useNavigate entry point for functional search updates. Done when the extra lmao key is rejected by TypeScript in the callback form, matching the direct search-object form.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.