Convert pathname to route params client side | Remix | Page 1

#

I'm trying to build an optimistic UI for a filtering screen. I have a bunch of filters hooked up to url params and search and when they change I want to immediately show the change in the UI (optimistically) using useNavigation.
The issue I'm having is that it's too tedious to manually parse through pathname. Is there a way to convert pathname to route params similar to what we get inside loader?

// someRoute.$id.thing 

// when filter changes useNavigation becomes available
const navigation = useNavigation()
const optimisticPath = navigation.location.pathname // someRoute/22/thing

// How do I do below? I don't want to manually parse the route and figure out that the 2nd segment is id.
const optimisticParams = magic(optimisticPath) // { id: '22' }

#

Convert pathname to route params client side

#

Note that I can't use useParams because that updates after your loader returns, it's not optimistic.

#Convert pathname to route params client side