fix: Nested routing

Author: rschristian

src/router.js

@@ -1,4 +1,4 @@
-import { h, Fragment, createContext, cloneElement, toChildArray } from 'preact';
+import { h, createContext, cloneElement, toChildArray } from 'preact';
 import { useContext, useMemo, useReducer, useLayoutEffect, useRef } from 'preact/hooks';
 
 /**
@@ -117,6 +117,7 @@ export function Router(props) {
 	const [c, update] = useReducer(c => c + 1, 0);
 
 	const { url, path, pathParams, searchParams, wasPush } = useLocation();
+	const { rest = path } = useContext(RouterContext);
 
 	const isLoading = useRef(false);
 	const prevRoute = useRef(path);
@@ -136,7 +137,7 @@ export function Router(props) {
 
 	let pathRoute, defaultRoute, matchProps;
 	toChildArray(props.children).some((/** @type {VNode<any>} */ vnode) => {
-		const matches = exec(path, vnode.props.path, (matchProps = { ...vnode.props, path, pathParams, searchParams }));
+		const matches = exec(rest, vnode.props.path, (matchProps = { ...vnode.props, path: rest, pathParams, searchParams }));
 		if (matches) return (pathRoute = cloneElement(vnode, matchProps));
 		if (vnode.props.default) defaultRoute = cloneElement(vnode, matchProps);
 	});
@@ -149,7 +150,7 @@ export function Router(props) {
 	const routeChanged = useMemo(() => {
 		prev.current = cur.current;
 
-		cur.current = /** @type {VNode<any>} */ (h(Fragment, { key: path }, incoming));
+		cur.current = /** @type {VNode<any>} */ (h(RouterContext.Provider, { value: matchProps }, incoming));
 
 		// Only mark as an update if the route component changed.
 		const outgoing = prev.current && prev.current.props.children;
@@ -263,6 +264,9 @@ Router.Provider = LocationProvider;
 LocationProvider.ctx = createContext(
 	/** @type {import('./router.d.ts').LocationHook & { wasPush: boolean }} */ ({})
 );
+const RouterContext = createContext(
+	/** @type {{ rest: string }} */ ({})
+);
 
 export const Route = props => h(props.component, props);
 

test/router.test.js

@@ -816,8 +816,8 @@ describe('Router', () => {
 		const Inner = () => (
 			<Router>
 				<Route
-					path="/bob"
-					component={() => null}
+					path="/baz"
+					component={() => <h1>Baz</h1>}
 				/>
 			</Router>
 		);
@@ -827,15 +827,16 @@ describe('Router', () => {
 				<Router>
 					<Route path="/foo/:id/*" component={Inner} />
 				</Router>
-				<a href="/foo/bar/bob"></a>
+				<a href="/foo/bar/baz"></a>
 				<ShallowLocation />
 			</LocationProvider>,
 			scratch
 		);
 
-		scratch.querySelector('a[href="/foo/bar/bob"]').click();
+		scratch.querySelector('a[href="/foo/bar/baz"]').click();
 		await sleep(1);
-		expect(loc).to.deep.include({ path: '/foo/bar/bob', pathParams: { id: 'bar' }, searchParams: {} });
+		expect(loc).to.deep.include({ path: '/foo/bar/baz', pathParams: { id: 'bar' }, searchParams: {} });
+		expect(scratch).to.have.property('textContent', 'Baz');
 	});
 
 	it('should append params in nested routes', async () => {