national-gold

useRouterState - documentation?

Hi, I saw this in the Kitchen Sink React Query File Based example in __root.tsx:

function RouterSpinner() {
  const isLoading = useRouterState({ select: (s) => s.status === 'pending' })
  return <Spinner show={isLoading} />
}

function RouterSpinner() {
  const isLoading = useRouterState({ select: (s) => s.status === 'pending' })
  return <Spinner show={isLoading} />
}

Is there any documentation for useRouterState(). I like the idea of a global spinner, but I wasn't quite sure how this all worked and so far couldn't find any documentation for this hook.

4 Replies

correct-apricot•2y ago

You can set the RouterSpinner as defaultPendingComponent in the router options

national-goldOP•2y ago

I see that is an option, by my original question still kind of stands: Is there documentation for the useRouterState hook / is it a recommended approach?

generous-apricot•2y ago

For whatever reason, we don't have the documentation for the useRouterState hook on the website. Please file an issue on GitHub and we'll work on getting the documentation for it up. In the meantime, the TLDR is that the hook is useful to tapping into the internal state the router uses for tracking changes and handling location commits and whatnot. In user-land, you should be able to easily navigate the hook's params and output using typescript's autocomplete. I personally use it mostly for the transition use-case you mentioned above, and for accessing the current location.

const location = useRouterState({ select: (s) => s.location });

const location = useRouterState({ select: (s) => s.location });

The selector is making sure you only capture what you need and don't trigger too many renders.

national-goldOP•2y ago

@Sean Cassiere Thanks so much for this info! I will try and get an issue posted on Github soon. I think the confusion arises from not being sure if the examples are up to date since there are some patterns in the examples that have since been deprecated and are not recommended. Appreciate you clearing things up and providing some insight on the hook!

Gaming

Programming

useRouterState - documentation?

Did you find this page helpful?