Riot.JS Unable to handle subRoute while using Tag-based routing

Question

I'm unable to handle sub-routes while using riot-router

I.e, I would like to handle sub-routes in my app like

• user/sujeet/edit
• user/sujeet/view
• user/sujeet/summary

In my app-user.tag I'm only able to extract first level of detail but not the entire sub-route into tokens.

Here is the plunkr url code plunkr source code direct preview link: link

Answer 1

Every "*" you match will be passed as an attribute inside your tag on("route", ...

So for example if you put in your app-user.tag

this.on("route", (id, verb) => {
  this.id = id
  this.verb = verb
})

You would be able to catch two "*" from your router

Answer 2

You could override the default parser method in order generate your own router tokens. In this case I overwrote the .. token in order to match all the url fragments

route.parser(null, function(path, filter) {
  const f = filter
    .replace(/\?/g, '\\?')
    .replace(/\*/g, '([^/?#]+?)')
    .replace(/\.\./, '.*');

  const re = new RegExp(`^${f}$`);
  const args = path.match(re);

  if (args) { 
    const value = args.slice(1)
    if (value.length) return value
    else return args[0].split('/')
  }
})

I have forked your initial example so please check your browser console to see the arguments received in your component http://plnkr.co/edit/tom6c1YWZQBeFZWTwcdv?p=preview

Answer 3

Use the ... spread operator or the arguments var.

this.on("route", (...args) => {
  this.id = args[0];
  this.verb = args[1] || null;
})

or

var self = this;
self.on("route", function(){
  self.id = arguments[0];
  self.verb = arguments[1] || null;
})