Absolute nested routes don't seem to work

[RobinClowers]

First off, thanks for creating this library, I love the concept. It's very possible I'm doing something wrong here.

Your readme says "React Router allows absolute child route paths if they match the parent path." I have a pretty simple structure, and I was able to get it working with relative paths, but not absolute.

I have a parent route /regions/:regionSlug, and the then a child: /regions/:regionSlug/clusters/:id/:clusterName. The child never seems to match.

Here is the typed definition:

const routes = {
  Region: route(
    "regions/:regionSlug",
    {},
    {
      Clusters: route(
        "clusters",
        {},
        {
          List: route(""),
          Details: route(":id/:clusterName"),
        }
      ),
    }
  ),
};

Here is are the actual routes:

<Route path={routes.Region.path} element={<Region />}>
  <Route
    path={routes.Region.Clusters.Details.path}
    element={<ClusterDetails />}
  />
</Route>

The region route matches, but the nested route doesn't.

[fenok]

Hello! Thank you for your interest!

I'm not sure what your problem is, but I was able to make it work here: https://codesandbox.io/s/react-router-6-outlet-playground-forked-2wc3nz?file=/src/App.js (navigate to regions/region-slug/clusters/id-value/cluster-name).

Maybe you don't have an <Outlet /> in <Region />? But then relative paths wouldn't make any difference...

[RobinClowers]

Thanks for getting back to me so quickly!

Good call on the missing outlet, that was the issue.

My original routes were a bit different I was using multiple <Routes> elements in different parts of the component tree, rather than directly nesting <Route> components. I didn't even realize you could use <Outlet> without the new data routers. I recently migrated this app from v5, so the routing is still using that general structure.

It seems like we could clarify the docs to say something like "React Router allows absolute child route paths if they match the parent path as long as you are using the v6 component. If you are using multiple components, you will have to use relative paths"?

[fenok]

Whoops, sorry, I completely spaced out on your question. 😅

Docs improvements are always good, I'll add a reminder to use an <Outlet />.

However, I'm not sure I fully understand your specific proposal. The current version of the library is specifically designed for React Router v6 (which is stated explicitly), and it can't really be used for v5 (they have significant differences).

As far as I'm aware, this is the only issue that can force the use of relative path patterns, which will hopefully be resolved eventually.

[RobinClowers]

I see how my statement was confusing, sorry about that. I just meant you have to use the Outlet (which is new in v6), and not Route components throughout your component tree (which is similar to how routing worked in v5). In retrospect, the distinction isn't very clear and probably not useful.