Using parameters with preact-iso/router

[smeijer]

When using preact-iso/router, which is the default in wmr, it doesn't seem to be possible to use route parameters.

Am I missing something? What's the recommended approach here?

import hydrate from 'preact-iso/hydrate';
import { LocationProvider, Router } from 'preact-iso/router';
import Home from './pages/home/index.js';
import NotFound from './pages/_404.js';

export function App() {
  return (
    <LocationProvider>
      <div class="app">
        <ErrorBoundary>
          <Router>
            <Home path="/:page?" />
            <NotFound default />
          </Router>
        </ErrorBoundary>
      </div>
    </LocationProvider>
  );
}

The sample will always result in "not found". Removing the optional parameter from the home route, will make "home" work again.

-            <Home path="/:page?" />
+            <Home path="/" />

[developit]

Hiya! I ran into this myself and threw a workaround together, but it's really gross. Instead, I think we should just land support for :param segments in Router itself.

[JoviDeCroock]

Hey @smeijer

This has been implemented in #300 not merged/released yet but if you want you can try it out

[smeijer]

Thanks for the heads up. I'll give it a shot.

[orzechowskid]

thanks for this issue and for the PR! I noticed that the following code functions correctly on main but on the wildcard-routes branch will throw a TypeError and claim that vnode.props is undefined:

const publicRoutes = {
  "/blog": lazy(() => import('./pages/blog.js')),
  "/blog/:id": lazy(() => import('./pages/blog/single-post.js'))
};
const privateRoutes = {
  "/settings": lazy(() => import('./pages/settings.js'))
};
export function App(serverData) {
  return (
        <main id="main">
          <Router>
            {Object.entries(publicRoutes).map(
              ([ path, Component ]) => <Component path={path} key={path} />
            )}
            {Object.entries(privateRoutes).map(
              ([ path, Component ]) => <PrivateRoute component={Component} path={path} key={path} />
            )}
            <NotFound default />
          </Router>
        </main>
  );
}

I believe this is due to <Router>'s child array not being flattened before exec() is called. the workaround is trivial of course but I figured I'd mention it anyway.

thanks again!