hook to check if a path matches just any route

[dberardo-com]

hi, i would like to know if there is a way to know if a path, like "/something/very/nested" is defined in the current router or not. Meaning if there is just any match in the router of the path is invalid.

i would like to make this check from a nested component, so using hooks would be ideal. the value of the path is a state variable so it could change with user interaction

[brophdawg11]

I think you want https://reactrouter.com/en/main/utils/match-routes

[dberardo-com]

well i knew about that one, but how get i get the set of all routes currently defined in the application ? is there a hook for it ?

[brophdawg11]

You're in charge of those since you provide them to React Router, so you can just extract them and use them directly (via createRoutesFromElements). No need for any indirection through React Router's layers.

https://codesandbox.io/s/wizardly-bird-fmwgzk?file=/src/index.js

[dberardo-com]

i see, so i should basically create the router all in one component, then import it from there and use it in the createRoutesFromElements) util function, right?

i think this could work for simple use cases, but what happens if there are many nested routers in the app ? and what if some routes are even dynamic or conditional on state ? this strategy would not work in that case right ?

or did i misunderstand your suggestion ?

[brophdawg11]

Correct - if your routes are conditional on UI state then there is no way to proactively determine if a route would match without actually triggering the new route so the React tree can render top-down and discover all of your routes. This is a consequence of render-driven route definition, and a large reason why RouterProvider lifts the route definitions out of the render lifecycle to decouple routes definition + data loading from rendering. If you are using RouterProvider, then you have your routes directly available via router.routes.