Usage of useParams in parent route segment for child param when child is not available
Lets say I have
books.$bookSlug.pages.$pageId.tsx and books.$bookSlug.tsx. I try to use const params = useParams({from: '/books/$bookSlug/pages/$pageId'}) in books.$booksSlug.tsx to get the pageId and to show it in the layout when visiting /books/$bookSlug/pages/$pagesId. The route /books/$bookSlug also should be available. But because of the attempt of read pageId with useParams I get the error Invariant failed: Could not find an active match from "/books/$bookSlug/pages/$pageId" when visiting /books/$bookSlug.
I tried using useMatch on /books/$bookSlug/pages/$pageId and only then fetch the 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?0 Replies