Wildcard support in router with setParams

[TimoRuetten]

Maybe I am doing it absolutely wrong but I am not able to use wildcards with FlowRouter correctly.

Everything I am describing in this issue is able to recognize in this repository:

https://github.com/TimoRuetten/test-flow-router-wildcard-problem

1. Problem: How to define a Wildcard URL in FlowRouter ?

I've found 2 ways to do this. The first is /wildcard* and the second is /wildcard(.*) - it seems that both of them are the same in my case. There is no difference when using these urls.

2. Problem: How to set params to a Wildcard-Param with FlowRouter.setParams ?

Thats the main problem. It seems that this is not possible with setParams. As you can see in my repository I am trying it in 2 ways:

const words = ['Word1', 'word2'];
FlowRouter.setParams({
    wildcard: words.join('/')
});
FlowRouter.setParams({
    wildcard: words
});

What I expect when calling the setParams method is in this case this url: /Word1/Word2 - but thats not what I get.

What I get with words.join('/'): The URL looks like this: /Word1%252FWord2 In my params Object is this: 'Word1/Word2'

What I get with words: The URL looks like this: /Word1%252CWord2 In my params Object is this: 'Word1,Word2'

I don't know why but when I give an array to setParams FlowRouter will join them with comma.

[gmsecrieru]

For what it's worth, I have tackled this situations with unnamed params:

FlowRouter.route('/products/(.*)?', {
    name: 'products',

    action(params) {
        // using unnamed params for/routes/like/this
        let seoFilter = (params[0] ? params[0] : null)
        let viewProps = { seoFilter };
        ReactLayout.render(App, { view: ProductsPage, viewProps });
    }

});

Hope that helps at least as a workaround :)

[TimoRuetten]

@arunoda is there any way you will add support later or do I have to use the workaround or do I have to make a own custom solution for myself ? What do you think ?

[chongwang87]

having the same issue wanted to set param that is wildcard from array of string.

[alexandrzavalii]

A hacky way is to replace Router.prototype.go function =)

FlowRouter.go = function(pathDef, fields, queryParams) {
  var path = this.path(pathDef, fields, queryParams);
  var useReplaceState = this.env.replaceState.get();
  const badSlash = '%252F';
  path = path.replace(badSlash, '/');
  if(useReplaceState) {
    this._page.replace(path);
  } else {
    this._page(path);
  }
};

[macrozone]

same problem here. "/" in path-params get escaped with "%252F"

[hacknlove]

a little improvement over the @alexandrzavalii hack

FlowRouter.go = function(pathDef, fields, queryParams) {
  var path = this.path(pathDef, fields, queryParams);
  var useReplaceState = this.env.replaceState.get();
  const badSlash = /%252F/g;
  path = path.replace(badSlash, '/');
  if(useReplaceState) {
    this._page.replace(path);
  } else {
    this._page(path);
  }
};