WIP

packages/preact-iso/router.d.ts

@@ -12,6 +12,7 @@ interface LocationHook {
 	url: string;
 	path: string;
 	query: Record<string, string>;
+	params: Record<string, string>;
 	route: (url: string) => void;
 }
 export const useLocation: () => LocationHook;

packages/preact-iso/router.js

@@ -66,7 +66,7 @@ export function LocationProvider(props) {
 		const u = new URL(url, location.origin);
 		const path = u.pathname.replace(/(.)\/$/g, '$1');
 		// @ts-ignore-next
-		return { url, path, query: Object.fromEntries(u.searchParams), route, wasPush };
+		return { url, path, query: Object.fromEntries(u.searchParams), route, wasPush, params: {} };
 	}, [url]);
 
 	useLayoutEffect(() => {
@@ -88,7 +88,7 @@ const RESOLVED = Promise.resolve();
 export function Router(props) {
 	const [, update] = useReducer(c => c + 1, 0);
 
-	const { url, path, query, wasPush } = useLocation();
+	const { url, path, query, wasPush, params } = useLocation();
 
 	// Monotonic counter used to check if an un-suspending route is still the current route:
 	const count = useRef(0);
@@ -114,7 +114,7 @@ export function Router(props) {
 
 		let p, d, m;
 		toChildArray(props.children).some(vnode => {
-			const matches = exec(path, vnode.props.path, (m = { path, query, params: {} }));
+			const matches = exec(path, vnode.props.path, (m = { path, query, params }));
 			if (matches) return (p = cloneElement(vnode, m));
 			if (vnode.props.default) d = cloneElement(vnode, m);
 		});

packages/preact-iso/test/router.test.js

@@ -436,4 +436,44 @@ describe('Router', () => {
 
 		pushState.mockRestore();
 	});
+
+	it.only('should append params in nested routes', async () => {
+		const pushState = jest.spyOn(history, 'pushState');
+		const Route = jest.fn(() => html`<a href="/foo#foo">foo</a>`);
+
+		let params;
+
+		const Inner = () => html`
+			<${Router}>
+				<${Route}
+					path="/foo/bar/bob"
+					component=${() => {
+						console.log(useLocation());
+						params = useLocation().params;
+						return null;
+					}}
+				/>
+			<//>
+		`;
+
+		render(
+			html`
+				<${LocationProvider}>
+					<${Router}>
+						<${Route} path="/foo/:id/*" component=${Inner} />
+					<//>
+					<a href="/foo/bar/bob"></a>
+				<//>
+			`,
+			scratch
+		);
+
+		scratch.querySelector('a[href="/foo/bar/bob"]').click();
+		await sleep(20);
+		expect(Route).toHaveBeenCalledTimes(1);
+		expect(params).toMatchObject({ url: '/foo#foo', path: '/foo' });
+		expect(pushState).toHaveBeenCalled();
+
+		pushState.mockRestore();
+	});
 });