Using url-pattern route configuration

[dpwrussell]

I had a look at the https://github.com/snd/url-pattern docs and that looks great, but I could not figure out how to apply this to my routes. The example I was trying to get working was a nested route. e.g. get the Fragment to be displayed should the url be /home, /home/subhome or whatever. I figured a regex would be the answer, but putting that into the routes seemed impossible as the routes are the keys. On the offchance I also tried the regex in the forRoute of the Fragment to no avail.

Split out from #35

[tptee]

The example I was trying to get working was a nested route. e.g. get the Fragment to be displayed should the url be /home, /home/subhome or whatever.

Can you post some example code? I'm confused as to what you're trying to do here.

[dpwrussell]

This is also a little bit related to #39... Also, let me preface this by saying that I've not spent a huge amount of time thinking about it and there could easily be use cases that would work completely differently.

Nested Routes

I wish to have a Fragment display whenever I am in route /home/, but also when I am in route /home/subhome.

const routes = {
  '/': {
    title: 'Root'
  },
  '/home': {
    title: 'Home',
    auth: true
  },
  '/home/subhome': {
    title: 'Subhome'
  }
};

Currently I'd have to write my Fragment like this:

<Fragment forRoutes=['/home', '/home/subhome']>
  <div>
    <p>Home</p>
    <Fragment forRoute='/home/subhome'>
      <p>Subhome</p>
    </Fragment>
  </div>
</Fragment>

Right? It's going to get pretty tedious adding all child routes to the parent routes. What's the plan for that?

When I mentioned the regex I was thinking that perhaps the way to do this was if evaluation of route was not intended to stop when it found a match, but to continue, potentially matching several things. In my example it would have then matched /home and /home/subhome, and the Fragment would have rendered if it was for one of those matches. I see that's not what is intended now you've updated #39.

[dpwrussell]

One possibility I was mulling over for nested routes was if it was possible to have a scenario where a Fragment matching a route would cause any parent Fragments to be rendered even if they did not match. I'm guessing that would be tough as when you need to decide if a Fragment is going to be rendered or not, you don't yet know what is inside it.

[tptee]

I wish to have a Fragment display whenever I am in route /home/, but also when I am in route /home/subhome.

This is all you should have to do to make that happen:

<Fragment forRoutes=['/home', '/home/subhome']>
  <p>This shows up on both /home and /home/subhome</p>
</Fragment>

forRoutes means "if any of these routes match, render the fragment's children."

[dpwrussell]

@tptee Thanks, but that's not quite what I was getting at. forRoutes is great if I have a component that I wish to appear at many routes, but what I'm after is a mechanism to nest routes.

In this example. There are three Fragments, two nested inside the other. If I was to specify the route /home then I would just get <div><p>Home</p></div> rendered, which is correct. But if the route was /home/sub1 then nothing at all is rendered because the /home route doesn't match. The desired result is to get <div><p>Home</p><p>Sub2</p></div>.

<Fragment forRoute='/home'>
  <div>
    <p>Home</p>
    <Fragment forRoute='/home/sub1'>
      <p>Sub1</p>
    </Fragment>
    <Fragment forRoute='/home/sub2'>
      <p>Sub2</p>
    </Fragment>
  </div>
</Fragment>

The only way I can see of achieving this as it stands is to do the following. Unfortunately that's not really maintainable once you have a deep and complex structure.

<Fragment forRoutes=['/home', '/home/sub1', '/home/sub2']>
  <div>
    <p>Home</p>
    <Fragment forRoute='/home/sub1'>
      <p>Sub1</p>
    </Fragment>
    <Fragment forRoute='/home/sub2'>
      <p>Sub2</p>
    </Fragment>
  </div>
</Fragment>

Is there no way to do that at present?

[tptee]

Right, there's no way to do that right now. <Fragment> is a reaction to the complexity and rigidity of <Route> in react-router. I found deeply-nested <Route>s hard to understand and scan.

I may explore an API to make these nested routes possible in the future. I can imagine something like:

<Fragment scope='/home'>
  <div>
    <p>Home</p>
    <Fragment forRoute='/sub1'>
      <p>Sub1</p>
    </Fragment>
    <Fragment forRoute='/sub2'>
      <p>Sub2</p>
    </Fragment>
  </div>
</Fragment>

[dpwrussell]

Actually, I don't think this would be a good idea. What I like about the Fragments is that they are just a convenience and not tightly bound to the routes.

The routes is where nesting must be configured.

I do think it absolutely has to be supported ultimately though, nested routes is a basic part of any routable application. Also, it is not really that hard: #47