TanStack•17mo ago•

1 reply

conventional-black

useSearch with validateSearch in _layout

I have the following routing structure

- post
   |- $postId
        |- _layout.tsx
        |- _layout
             |- index.tsx

- post
   |- $postId
        |- _layout.tsx
        |- _layout
             |- index.tsx

_layout.tsx

_layout.tsx

I use

<Outlet/>

<Outlet/>

to render what

index.tsx

index.tsx

is rendering.
And I also do search validation for the

foorBar

foorBar

search param.

  validateSearch: ({
    fooBar,
  }: {
    fooBar: string;
  })=> {
    if (!fooBar) {
      throw new Error('fooBar is required');
    }
    return { fooBar };
  },

  validateSearch: ({
    fooBar,
  }: {
    fooBar: string;
  })=> {
    if (!fooBar) {
      throw new Error('fooBar is required');
    }
    return { fooBar };
  },

Then inside my component, I do

const { fooBar } = useSearch({ from: '/post/$postId/' });

const { fooBar } = useSearch({ from: '/post/$postId/' });

And I get

Property 'fooBar' does not exist on type '{}'.

Property 'fooBar' does not exist on type '{}'.

However, if I do the following, it's inferred correctly.

const { fooBar } = useSearch({ from: '/post/$postId/_layout' });

const { fooBar } = useSearch({ from: '/post/$postId/_layout' });

Do I make a mistake here, or is this how it should be? Because I can access the path params without any issues with

/post/$postId

/post/$postId

when using

useParams

useParams

TanStack•17mo ago•

1 reply

conventional-black

useSearch with validateSearch in _layout

I have the following routing structure

- post
   |- $postId
        |- _layout.tsx
        |- _layout
             |- index.tsx

- post
   |- $postId
        |- _layout.tsx
        |- _layout
             |- index.tsx

_layout.tsx

_layout.tsx

I use

<Outlet/>

<Outlet/>

to render what

index.tsx

index.tsx

is rendering.
And I also do search validation for the

foorBar

foorBar

search param.

  validateSearch: ({
    fooBar,
  }: {
    fooBar: string;
  })=> {
    if (!fooBar) {
      throw new Error('fooBar is required');
    }
    return { fooBar };
  },

  validateSearch: ({
    fooBar,
  }: {
    fooBar: string;
  })=> {
    if (!fooBar) {
      throw new Error('fooBar is required');
    }
    return { fooBar };
  },

Then inside my component, I do

const { fooBar } = useSearch({ from: '/post/$postId/' });

const { fooBar } = useSearch({ from: '/post/$postId/' });

And I get

Property 'fooBar' does not exist on type '{}'.

Property 'fooBar' does not exist on type '{}'.

However, if I do the following, it's inferred correctly.

const { fooBar } = useSearch({ from: '/post/$postId/_layout' });

const { fooBar } = useSearch({ from: '/post/$postId/_layout' });

Do I make a mistake here, or is this how it should be? Because I can access the path params without any issues with

/post/$postId

/post/$postId

when using

useParams

useParams

useSearch with validateSearch in _layout

Similar Threads

useSearch with validateSearch in _layout

Similar Threads

Similar Threads

Similar Threads