Replies: 2 comments 12 replies
-
Have you considered making it possible to automatically throw if used by a component not rendered on a particular route - so the consuming component doesn’t need to handle that itself? I can see why making it nullable is more flexible (like React’s use context), but I almost always need to make my own context specific hook that throws if used incorrectly and that would defeat much of the benefit of this I expect if you needed to do that (as otherwise you could just import that route’s typegen file where you define the wrapper, which is close to what we’re doing already). |
Beta Was this translation helpful? Give feedback.
-
I'm really excited about this new From what I understand, this hook works similarly to Also, the current name can be a bit confusing, especially since we already have |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Supersedes: #13896 , #10761
Relates to: #9854 , #13961
PR: #14407
New
useRoute
hook for accessing data & metadata for specific routesFor example, let's say you have an
admin
route somewhere in your app and you want any child routes ofadmin
to all have access to thehandle
,loaderData
, andactionData
fromadmin.
You might even want to create a reusable widget that all of the routes nested under
admin
could use:In framework mode,
useRoute
knows all your app's routes and gives you TS errors when invalid route IDs are passed in:useRoute
returnsundefined
if the route is not part of the current page:Note: the
root
route is the exception since it is guaranteed to be part of the current page.As a result,
useRoute
never returnsundefined
forroot
.loaderData
andactionData
are marked as optional since they could be accessed before theaction
is triggered or after theloader
threw an error:If instead of a specific route, you wanted access to the current route's
loaderData
andactionData
, you can calluseRoute
without arguments:This usage is equivalent to calling
useLoaderData
anduseActionData
, but consolidates all route data access into one hook:useRoute
.Note: when calling
useRoute()
(without a route ID), TS has no way to know which route is the current route.As a result,
loaderData
andactionData
are typed asunknown
.If you want more type-safety, you can either narrow the type yourself with something like
zod
or you can refactor your app to pass down typed props to yourAdminWidget
:Future work
handle
(useRoute: return type-safehandle
#14462)Beta Was this translation helpful? Give feedback.
All reactions