Skip to content

UseNavigate search functional syntax missing type errors #6264

@Maskoe

Description

@Maskoe

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    typesChanges to the typescript types

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions