router icon indicating copy to clipboard operation
router copied to clipboard

Invariant Failed when using ``Route.`` hooks on lazy routes within a route group

Open FFGFlash opened this issue 1 year ago • 0 comments

Describe the bug

Recently I updated my project to the latest version of react-router and found this bug with my route. Originally I thought this was just a bug with route groups, but found while reproducing it has to be a lazy route as well.

When creating a lazy route within a route group trying to use a hook such as useParams from the Route constant will throw an Invariant Failed error.

Your Example Website or App

https://github.com/FFGFlash/tanstack-bug

Steps to Reproduce the Bug or Issue

  1. Create a route group (folder)
  2. Create a lazy route with params $param.lazy.tsx
  3. Attempt to get the params using the route constant const { param } = Route.useParams()

Expected behavior

I would expect it to work the same as other routes, as shown in the attached repo the bug only occurs when the route contains a group and is lazy, all other combinations work as expected.

Screenshots or Videos

No response

Platform

  • OS: Windows and Linux
  • Browser: Chrome
  • Version: Unsure

Additional context

No response

FFGFlash avatar Aug 29 '24 16:08 FFGFlash