Advanced Route-Matching

[summonmayank]

Currently, raviger router does not support precedence matching. For example, if we have a route object that looks something like this:

{
      '/comp1/*': () => <h1>Just Comp-1</h1>,
      '/comp1/view2/*': () => <h1>Comp-1-view-2</h1>,
      '/comp1/view1/*': () => <h1>Comp-1-view1</h1>,
      '/comp2/*': () => <h1>Comp-2</h1>
}

If the app tries to route to /comp1/view1, instead of matching route /comp1/view1/* it matches /comp1/*. This can be fixed if we can reorder the routes in this object, like this:

{
      '/comp1/view2/*': () => <h1>Comp-1-view-2</h1>,
      '/comp1/view1/*': () => <h1>Comp-1-view1</h1>,
      '/comp1/*': () => <h1>Just Comp-1</h1>,
      '/comp2/*': () => <h1>Comp-2</h1>
}

The above works fine. But in some cases where we are dynamically creating this routes object, order cannot be maintained, since it's a javascript object which does not guarantee ordering when pushing new key-value pair.

It would be great if route precedence can be implemented. What does the community think ?

[summonmayank]

I found a fix for this. I was having trouble in finding out how to sort a javascript object, here is the link on how we can do it:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
Basically, sort the route object using reduce and accumulator, and then feed it to the useRoutes() hook.

[kyeotic]

I've thought about this before. An object is a compact way to describe the relationship between path and result, but the spec says that the order of keys is undefined do it wasn't the best choice for this. Any sorting we decide to apply after the fact is has to work against this structure.

There are three high level options.

First, we could embed priority into the path/object-key somehow. I think all the options here are pretty ugly, but it is an option.

{
  '$p1/a': () => (),
  '$p0/a': () => (), // will match
}

Second, the property could become its own object with sub properties for priority and route result function. This is easy to understand, but adds complexity to the api.

{
  '/a*': () => (),
  '/a/:user': {
    match: () => (),
    priority: 1
  }
}

The last option, which I think is my favorite currently, is to support passing in an array instead of an object. It could be an array of arrays, where each element is an array of [path, result] or it could be an array of objects. Either way, the priority is implicit in the order of the array.

[kyeotic]

I will be doing this for v5