question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Wildcard support in router with setParams

See original GitHub issue

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.

Issue Analytics

  • State:open
  • Created 7 years ago
  • Reactions:4
  • Comments:6

github_iconTop GitHub Comments

1reaction
alexandrzavaliicommented, Sep 30, 2016

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);
  }
};
0reactions
hacknlovecommented, Sep 6, 2017

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);
  }
};
Read more comments on GitHub >

github_iconTop Results From Across the Web

Better support for Wildcard URLs · Issue #600 · kadirahq/flow-router ...
It would be nice to have a better support of Wildcard URLs. *1. ... setParams should work correctly as array and not as...
Read more >
Routing and URL Parameters | Routing and Navigation | Flow
A navigation target that supports typed parameters passed through the URL ... defines the setParameter method that is called by the Router ,...
Read more >
Vue Router - catch all wildcard not working - Stack Overflow
I'm using Vue Router with Vue 3 and am trying to add a catch-all route to redirect the user if they try and...
Read more >
Dynamic Routes - Next.js
Dynamic Routes are pages that allow you to add custom params to your URLs. Start creating Dynamic Routes and learn more here.
Read more >
Rails Routing from the Outside In - Ruby on Rails Guides
The Rails router recognizes URLs and dispatches them to a controller's action, ... Ruby source file you can use all of its features...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found