preact-router
preact-router copied to clipboard
Star wildcard works only in last "path" segment
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
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;
}
}
...
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)