search params appear in `_strictSearch` but not in `search`

Im encountering a problem where my search params show up in the URL as expected, but wont be available using

Route.useSearch()

Route.useSearch()

.
Using the devtools i can see that they appear in the parent routes search, but only appear in the

/page

/page

route under

_strictSearch

_strictSearch

. Anyone knows how this could happen?

export const Route = createFileRoute(
  "/x/$projectId/_layout/page"
)({
  component: MyComponent,
  validateSearch: zodValidator(
    z.object({
      foo: fallback(z.string().optional(), "foo").default("foo"),
      bar: fallback(z.string().optional(), "bar").default("bar"),
      baz: fallback(z.string().optional(), "baz").default("baz")
    })
  ),
});

function MyComponent() {
  const search = Route.useSearch();
  console.log("search", search);

  return null;
}

export const Route = createFileRoute(
  "/x/$projectId/_layout/page"
)({
  component: MyComponent,
  validateSearch: zodValidator(
    z.object({
      foo: fallback(z.string().optional(), "foo").default("foo"),
      bar: fallback(z.string().optional(), "bar").default("bar"),
      baz: fallback(z.string().optional(), "baz").default("baz")
    })
  ),
});

function MyComponent() {
  const search = Route.useSearch();
  console.log("search", search);

  return null;
}

TanStack•7mo ago•

14 replies

verbal-lime

search params appear in `_strictSearch` but not in `search`

Im encountering a problem where my search params show up in the URL as expected, but wont be available using

Route.useSearch()

Route.useSearch()

.
Using the devtools i can see that they appear in the parent routes search, but only appear in the

/page

/page

route under

_strictSearch

_strictSearch

. Anyone knows how this could happen?

export const Route = createFileRoute(
  "/x/$projectId/_layout/page"
)({
  component: MyComponent,
  validateSearch: zodValidator(
    z.object({
      foo: fallback(z.string().optional(), "foo").default("foo"),
      bar: fallback(z.string().optional(), "bar").default("bar"),
      baz: fallback(z.string().optional(), "baz").default("baz")
    })
  ),
});

function MyComponent() {
  const search = Route.useSearch();
  console.log("search", search);

  return null;
}

export const Route = createFileRoute(
  "/x/$projectId/_layout/page"
)({
  component: MyComponent,
  validateSearch: zodValidator(
    z.object({
      foo: fallback(z.string().optional(), "foo").default("foo"),
      bar: fallback(z.string().optional(), "bar").default("bar"),
      baz: fallback(z.string().optional(), "baz").default("baz")
    })
  ),
});

function MyComponent() {
  const search = Route.useSearch();
  console.log("search", search);

  return null;
}

search params appear in `_strictSearch` but not in `search`

Similar Threads

search params appear in `_strictSearch` but not in `search`

Similar Threads

Similar Threads

Similar Threads