Merge pull request #11 from preactjs/allow-passing-props-to-routes

feat: allow passing props to routes

Author: JoviDeCroock

src/router.js

@@ -128,7 +128,7 @@ export function Router(props) {
 
 		let p, d, m;
 		toChildArray(props.children).some(vnode => {
-			const matches = exec(rest, vnode.props.path, (m = { path: rest, query, params, rest: '' }));
+			const matches = exec(rest, vnode.props.path, (m = { ...vnode.props, path: rest, query, params, rest: '' }));
 			if (matches) return (p = cloneElement(vnode, m));
 			if (vnode.props.default) d = cloneElement(vnode, m);
 		});

test/router.test.js

@@ -23,6 +23,38 @@ describe('Router', () => {
 		history.replaceState(null, null, '/');
 	});
 
+	it('should allow passing props to a route', async () => {
+		const Home = jest.fn(() => html`<h1>Home</h1>`);
+		const stack = [];
+		let loc;
+		render(
+			html`
+				<${LocationProvider}>
+					<${Router}
+						onRouteChange=${url => {
+							stack.push(url);
+						}}
+					>
+						<${Home} path="/" test="2" />
+					<//>
+					<${() => {
+						loc = useLocation();
+					}} />
+				<//>
+			`,
+			scratch
+		);
+
+		expect(scratch).toHaveProperty('textContent', 'Home');
+		expect(Home).toHaveBeenCalledWith({ path: '/', query: {}, params: {}, rest: '', test: '2' }, expect.anything());
+		expect(loc).toMatchObject({
+			url: '/',
+			path: '/',
+			query: {},
+			route: expect.any(Function)
+		});
+	});
+
 	it('should switch between synchronous routes', async () => {
 		const Home = jest.fn(() => html`<h1>Home</h1>`);
 		const Profiles = jest.fn(() => html`<h1>Profiles</h1>`);