v6 dynamic segment with enumerated values

[JakobJingleheimer]

I want to use route params for (among other things) determining API requests and also specify a component for each valid value. The following works in terms of route params and mounting the layout component SectionContainer (which contains an <Outlet />), but the appropriate route component is not loaded.

<Route
  path=":section"
  Component={SectionContainer}
  loader={({ params: { section } }) => {
    const endpoint = endpoints[section];
    const data = be.get(endpoint);
    return defer({ data });
  }}
>
  <Route
    index
    Component={Foo}
  />
  <Route
    path="bar"
    Component={Bar}
  />
  <Route
    path="qux/:subSection"
    Component={Qux}
  >
    <Route
      path="zed"
      Component={Zed}
    />
    {/* … */}
  </Route>
</Route>

I've tried a couple variations of this (ex adding a "wrapper" <Route path=":section"> and nesting <Route Component={SectionContainer}> within), but everything I try has the same result: Matched leaf route at location "…/foo" does not have an element or Component. […]

I feel like this should be possible, I'm just not finding the right mix.

P.S. Sorry if this has already been answered—I looked through discussions, issues, and the docs, but I didn't find anything.

EDIT: repro https://codesandbox.io/s/react-router-v6-dynamic-param-enums-xs9ncr?file=/src/index.js

[kiliman]

Can you provide a minimal reproduction?

[kiliman]

That said, I recommend you move your loader code to each route component. That way, you know exactly what data is being used by each route.

[JakobJingleheimer]

Mm, I need to access params elsewhere in the app, so splitting pathname all over the place is not really a viable solution.

I had thought if I made :section (and :subSection) optional, react-router might do both.

Would you consider a feature request for this functionality? I've been doing this since AngularJS v1. It's very handy.

[JakobJingleheimer]

That said, I recommend you move your loader code to each route component. That way, you know exactly what data is being used by each route.

Do you mean into the route component's file? IRL, I do and use lazy(); for the sample here I put it inline for simplicity.

[kiliman]

I mean, <Foo> should have a loader calling the foo endpoint, etc. Instead of having a parent route that does that.

[JakobJingleheimer]

Ah, that is a good point. If the child loader can access its parent's data, then that works great actually. The problem was that the parent (container) fetches a generic subset of the data (that all children need, and that part of the UI renders whilst the child is sorting itself out) and then children fetch a different subset specific to the child (but they're from the same entity—say Product). So if I can merge them together before returning to the child, win-win.