How can i determine the _data parameter of a route by it's pathname?

[sage smelt]

I need to know what is the loader url of routes by their pathnames. is it possible?

[tranquil gorge]

I don't understand what you're asking.. can you give an example?

[sage smelt]

let's say that I have a route /blog/posts/2 in a file routes/blog.posts.$id.tsx
When navigating to this route client side remix is making a request to /blog/posts/2?_data=routes/blog.posts.$id.

I need to determine this url (with the _data param) by the pathname.

[tranquil gorge]

Gotcha.. you can inspect the window.__remixManifest variable.. it's an object keyed by id (routes/blog.posts.$id) and you'll find a path property (blog/posts/:id)

[junior glade]

The route ID (what you see in _data) is the file path inside app without the extension

[sage smelt]

Yes but I need to do it dynamically.
resolve the id by the pathname

[junior glade]

So in your example of the file is on app/routes/blog.posts.$id.tsx then the route ID is routes/blog.posts.$id

You need the file name to resolve it

Because /blog/posts/123 could match many different route ids

For example routes/blog/posts/$id or routes/blog.posts/$id or routes/blog.posts.123

To resolve from the pathname you would have to know the routes before, and if you know that you can do it from the route ID

[sage smelt]

Well I'm explaining my way to solution instead of the problem.

I'm trying to disable links to routes the haven't been cached yet when users are offline.
I was thinking to use caches.match to do it but figured that perhaps i need to check the _data url

[sage smelt]

how do i do it?
I can get all routes configuration from remixManifest

[junior glade]

The remix manifest is on window.__remixManifest, there’s a routes or modules key if I’m not wrong. You can check there the list of pathnames and their route ID, then you would have to get the current pathname and check which was match

[sage smelt]

is there a way use react-router matching algorithm for that?

[junior glade]

I’m not aware if there’s a way to use it

I know there’s a useMatch hook but I think it doesn’t work for your use case

[sage smelt]

Do you think my approach can work though?

[tranquil gorge]

Ah, in that case, there's a way but you'd have to copy some Remix functions that are not exported
you can check how Remix renders prefetch links https://github.com/remix-run/remix/blob/2248669ed59fd716e267ea41df5d665d4781f4a9/packages/remix-react/components.tsx#L600