rubber-blue

Usage of useParams in parent route segment for child param when child is not available

Lets say I have

books.$bookSlug.pages.$pageId.tsx

books.$bookSlug.pages.$pageId.tsx

and

books.$bookSlug.tsx

books.$bookSlug.tsx

. I try to use

const params = useParams({from: '/books/$bookSlug/pages/$pageId'})

const params = useParams({from: '/books/$bookSlug/pages/$pageId'})

books.$booksSlug.tsx

books.$booksSlug.tsx

to get the

pageId

pageId

and to show it in the layout when visiting

/books/$bookSlug/pages/$pagesId

/books/$bookSlug/pages/$pagesId

. The route

/books/$bookSlug

/books/$bookSlug

also should be available. But because of the attempt of read

pageId

pageId

with

useParams

useParams

I get the error

Invariant failed: Could not find an active match from "/books/$bookSlug/pages/$pageId"

Invariant failed: Could not find an active match from "/books/$bookSlug/pages/$pageId"

when visiting

/books/$bookSlug

/books/$bookSlug

.
I tried using

useMatch

useMatch

/books/$bookSlug/pages/$pageId

/books/$bookSlug/pages/$pageId

and only then fetch the

pageId

pageId

paramter, but this seems to violate the "React Hooks must be called in the exact same order in every component render" rule.

How to approach this use-case?

TanStack•16mo ago

rubber-blue

Usage of useParams in parent route segment for child param when child is not available

Lets say I have

books.$bookSlug.pages.$pageId.tsx

books.$bookSlug.pages.$pageId.tsx

and

books.$bookSlug.tsx

books.$bookSlug.tsx

. I try to use

const params = useParams({from: '/books/$bookSlug/pages/$pageId'})

const params = useParams({from: '/books/$bookSlug/pages/$pageId'})

books.$booksSlug.tsx

books.$booksSlug.tsx

to get the

pageId

pageId

and to show it in the layout when visiting

/books/$bookSlug/pages/$pagesId

/books/$bookSlug/pages/$pagesId

. The route

/books/$bookSlug

/books/$bookSlug

also should be available. But because of the attempt of read

pageId

pageId

with

useParams

useParams

I get the error

Invariant failed: Could not find an active match from "/books/$bookSlug/pages/$pageId"

Invariant failed: Could not find an active match from "/books/$bookSlug/pages/$pageId"

when visiting

/books/$bookSlug

/books/$bookSlug

.
I tried using

useMatch

useMatch

/books/$bookSlug/pages/$pageId

/books/$bookSlug/pages/$pageId

and only then fetch the

pageId

pageId

paramter, but this seems to violate the "React Hooks must be called in the exact same order in every component render" rule.

How to approach this use-case?

Usage of useParams in parent route segment for child param when child is not available

Similar Threads

Usage of useParams in parent route segment for child param when child is not available

Similar Threads

Similar Threads

Similar Threads