preact-router icon indicating copy to clipboard operation
preact-router copied to clipboard

Star wildcard works only in last "path" segment

Open gnaeus opened this issue 9 years ago • 2 comments
trafficstars

It seems that * wildcard works only in the end of path and when it used with some path-parameter.

For example url /post/123/comments matches to route /post/:id*. And matches.id == "123/comments"

But if we use * in the middle of query it does not work:

const App = () => (
  <div class="app">
    <Header />
    <Router>
      <Home path="/*/" />
      <Profile path="/*/profile/:user?" />
      <Error type="404" default />
    </Router>
  </div>
);
const Header = () => (
  <header>
    <nav>
      <a href="/appRoot/">Home</a>
      <a href="/appRoot/profile">Profile</a>
      <a href="/appRoot/profile/john">John</a>
      <a href="/appRoot/asdf">Error</a>
    </nav>
  </header>
);

This config always show "404" page. See JSFiddle

gnaeus avatar Aug 17 '16 06:08 gnaeus

I think it is because of exec() function in utils.js:

export function exec(url, route, opts=EMPTY) {
  for (let i=0; i<max; i++) {
    if (route[i] && route[i].charAt(0)===':') {
      ... // star wildcard handled only here
    }
    else if (route[i]!==url[i]) {
      // but not here
      ret = false;
      break;
    }
  }
...

gnaeus avatar Aug 17 '16 07:08 gnaeus

Right now * is just a "splat" modifier, the standalone asterisk isn't supported. I'd love to add support for it though! It seems like the second else if there could just be changed to:

else if (route[i]!=='*' && route[i]!==url[i]) {
  ret = false;
  break;}

(though this approach wouldn't support arbitrary segment counts)

developit avatar Aug 17 '16 15:08 developit