support nested routes, and a base prop to start from if necessary

README.md

@@ -53,6 +53,22 @@ You can even mix-and-match URL parameters and normal `props`.
 </Router>
 ```
 
+### Nesting routers
+
+Routers will append the parent Routers' URLs together to come up with the matching route for children.
+
+```js
+<Router>
+  <A path="/" />                 //will route '/'
+  <Router path="/app/:bar*">     //will route '/app/*' (could also use default here)
+    <B path="/b"/>               //will route '/app/b'
+    <C path="/c" />              //will route '/app/c'
+  </Router>
+  <D path="/d" />                //will route '/d'
+  <E default />                  //will route anything not listed above
+</Router>
+```
+
 ### Lazy Loading
 
 Lazy loading (code splitting) with `preact-router` can be implemented easily using the [AsyncRoute](https://www.npmjs.com/package/preact-async-route) module:

src/index.js

@@ -1,5 +1,5 @@
 import { cloneElement, h, Component } from 'preact';
-import { exec, pathRankSort, assign } from './util';
+import { exec, pathRankSort, assign, segmentize } from './util';
 
 let customHistory = null;
 
@@ -146,19 +146,35 @@ function initEventListeners() {
 
 
 class Router extends Component {
-	constructor(props) {
+	constructor(props, context) {
 		super(props);
+		this.baseUrl = this.props.base || '';
+		if (props.path) {
+			let segments = segmentize(props.path);
+			segments.forEach(segment => {
+				if (segment.indexOf(':') == -1) {
+					this.baseUrl = this.baseUrl + '/' + segment;
+				}
+			});
+		}
 		if (props.history) {
 			customHistory = props.history;
 		}
-
+		if (context && context['preact-router-base'] && !this.props.base) {
+			this.baseUrl = context['preact-router-base'] + this.baseUrl;
+		}
 		this.state = {
 			url: props.url || getCurrentUrl()
 		};
 
 		initEventListeners();
 	}
 
+	getChildContext() {
+		let result = {['preact-router-base']: this.baseUrl};
+		return result;
+	}
+
 	shouldComponentUpdate(props) {
 		if (props.static!==true) return true;
 		return props.url!==this.props.url || props.onChange!==this.props.onChange;
@@ -211,7 +227,7 @@ class Router extends Component {
 	getMatchingChildren(children, url, invoke) {
 		return children.slice().sort(pathRankSort).map( vnode => {
 			let attrs = vnode.attributes || {},
-				path = attrs.path,
+				path = this.baseUrl + attrs.path,
 				matches = exec(url, path, attrs);
 			if (matches) {
 				if (invoke!==false) {

src/match.js

@@ -1,7 +1,23 @@
-import { h, Component } from 'preact';
+import { h, Component, cloneElement } from 'preact';
 import { subscribers, getCurrentUrl, Link as StaticLink } from 'preact-router';
+import { exec, segmentize } from './util';
 
 export class Match extends Component {
+	constructor(props, context) {
+		super(props);
+		this.baseUrl = this.props.base || '';
+		if (props.path) {
+			let segments = segmentize(props.path);
+			segments.forEach(segment => {
+				if (segment.indexOf(':') == -1) {
+					this.baseUrl = this.baseUrl + '/' + segment;
+				}
+			});
+		}
+		if (context && context['preact-router-base']) {
+			this.baseUrl = context['preact-router-base'] + this.baseUrl;
+		}
+	}
 	update = url => {
 		this.nextUrl = url;
 		this.setState({});
@@ -12,15 +28,22 @@ export class Match extends Component {
 	componentWillUnmount() {
 		subscribers.splice(subscribers.indexOf(this.update)>>>0, 1);
 	}
-	render(props) {
+	getChildContext() {
+		let result = {['preact-router-base']: this.baseUrl};
+		return result;
+	}
+	render(props, state, context) {
 		let url = this.nextUrl || getCurrentUrl(),
 			path = url.replace(/\?.+$/,'');
 		this.nextUrl = null;
-		return props.children[0] && props.children[0]({
+		const newProps = {
 			url,
 			path,
-			matches: path===props.path
-		});
+			matches: path===props.path || exec(path, context['preact-router-base'] + props.path, {})
+		};
+		return props.children[0] && 
+		  (typeof props.children[0] === 'function' ? 
+			  props.children[0](newProps) : cloneElement(props.children[0], newProps));
 	}
 }
 

test/dom.js

@@ -121,6 +121,193 @@ describe('dom', () => {
 			expect(A.prototype.componentWillUnmount).to.have.been.calledOnce;
 		});
 
+		it('should support nested routers with default', () => {
+			class X {
+				componentWillMount() {}
+				componentWillUnmount() {}
+				render(){ return <div />; }
+			}
+			sinon.spy(X.prototype, 'componentWillMount');
+			sinon.spy(X.prototype, 'componentWillUnmount');
+			class Y {
+				componentWillMount() {}
+				componentWillUnmount() {}
+				render(){ return <div />; }
+			}
+			sinon.spy(Y.prototype, 'componentWillMount');
+			sinon.spy(Y.prototype, 'componentWillUnmount');
+			mount(
+				<Router base="/app">
+					<X path="/x" />
+					<Router default>
+					  <Y path="/y"/>
+					</Router>
+				</Router>
+			);
+			expect(X.prototype.componentWillMount).not.to.have.been.called;
+			expect(Y.prototype.componentWillMount).not.to.have.been.called;
+			route('/app/x');
+			expect(X.prototype.componentWillMount).to.have.been.calledOnce;
+			expect(X.prototype.componentWillUnmount).not.to.have.been.called;
+			expect(Y.prototype.componentWillMount).not.to.have.been.called;
+			expect(Y.prototype.componentWillUnmount).not.to.have.been.called;
+			route('/app/y');
+			expect(X.prototype.componentWillMount).to.have.been.calledOnce;
+			expect(X.prototype.componentWillUnmount).to.have.been.calledOnce;
+			expect(Y.prototype.componentWillMount).to.have.been.calledOnce;
+			expect(Y.prototype.componentWillUnmount).not.to.have.been.called;
+		});
+
+		it('should support nested routers with path', () => {
+			class X {
+				componentWillMount() {}
+				componentWillUnmount() {}
+				render(){ return <div />; }
+			}
+			sinon.spy(X.prototype, 'componentWillMount');
+			sinon.spy(X.prototype, 'componentWillUnmount');
+			class Y {
+				componentWillMount() {}
+				componentWillUnmount() {}
+				render(){ return <div />; }
+			}
+			sinon.spy(Y.prototype, 'componentWillMount');
+			sinon.spy(Y.prototype, 'componentWillUnmount');
+			mount(
+				<Router base='/baz'>
+					<X path="/j" />
+					<Router path="/box/:bar*">
+						<Y path="/k"/>
+					</Router>
+				</Router>
+			);
+			expect(X.prototype.componentWillMount).not.to.have.been.called;
+			expect(Y.prototype.componentWillMount).not.to.have.been.called;
+			route('/baz/j');
+			expect(X.prototype.componentWillMount).to.have.been.calledOnce;
+			expect(X.prototype.componentWillUnmount).not.to.have.been.called;
+			expect(Y.prototype.componentWillMount).not.to.have.been.called;
+			expect(Y.prototype.componentWillUnmount).not.to.have.been.called;
+			route('/baz/box/k');
+			expect(X.prototype.componentWillMount).to.have.been.calledOnce;
+			expect(X.prototype.componentWillUnmount).to.have.been.calledOnce;
+			expect(Y.prototype.componentWillMount).to.have.been.calledOnce;
+			expect(Y.prototype.componentWillUnmount).not.to.have.been.called;
+		});
+
+		it('should support deeply nested routers', () => {
+			class X {
+				componentWillMount() {}
+				componentWillUnmount() {}
+				render(){ return <div />; }
+			}
+			sinon.spy(X.prototype, 'componentWillMount');
+			sinon.spy(X.prototype, 'componentWillUnmount');
+			class Y {
+				componentWillMount() {}
+				componentWillUnmount() {}
+				render(){ return <div />; }
+			}
+			sinon.spy(Y.prototype, 'componentWillMount');
+			sinon.spy(Y.prototype, 'componentWillUnmount');
+			mount(
+				<Router base='/baz'>
+					<X path="/j" />
+					<z path="/box/:bar*">
+						<Router path="/box">
+							<Y path="/k"/>
+						</Router>
+					</z>
+				</Router>
+			);
+			expect(X.prototype.componentWillMount).not.to.have.been.called;
+			expect(Y.prototype.componentWillMount).not.to.have.been.called;
+			route('/baz/j');
+			expect(X.prototype.componentWillMount).to.have.been.calledOnce;
+			expect(X.prototype.componentWillUnmount).not.to.have.been.called;
+			expect(Y.prototype.componentWillMount).not.to.have.been.called;
+			expect(Y.prototype.componentWillUnmount).not.to.have.been.called;
+			route('/baz/box/k');
+			expect(X.prototype.componentWillMount).to.have.been.calledOnce;
+			expect(X.prototype.componentWillUnmount).to.have.been.calledOnce;
+			expect(Y.prototype.componentWillMount).to.have.been.calledOnce;
+			expect(Y.prototype.componentWillUnmount).not.to.have.been.called;
+		});
+
+		it('should support nested routers and Match(s)', () => {
+			class X {
+				componentWillMount() {}
+				componentWillUnmount() {}
+				render(){ return <div />; }
+			}
+			sinon.spy(X.prototype, 'componentWillMount');
+			sinon.spy(X.prototype, 'componentWillUnmount');
+			class Y {
+				componentWillMount() {}
+				componentWillUnmount() {}
+				render(){ return <div />; }
+			}
+			sinon.spy(Y.prototype, 'componentWillMount');
+			sinon.spy(Y.prototype, 'componentWillUnmount');
+			mount(
+				<Router base='/ccc'>
+					<X path="/jjj" />
+					<Match path="/xxx/:bar*">
+							<Y path="/kkk"/>
+					</Match>
+				</Router>
+			);
+			expect(X.prototype.componentWillMount, 'X1').not.to.have.been.called;
+			expect(Y.prototype.componentWillMount, 'Y1').not.to.have.been.called;
+			route('/ccc/jjj');
+			expect(X.prototype.componentWillMount, 'X2').to.have.been.calledOnce;
+			expect(X.prototype.componentWillUnmount, 'X3').not.to.have.been.called;
+			expect(Y.prototype.componentWillMount, 'Y2').not.to.have.been.called;
+			expect(Y.prototype.componentWillUnmount, 'Y3').not.to.have.been.called;
+			route('/ccc/xxx/kkk');
+			expect(X.prototype.componentWillMount, 'X4').to.have.been.calledOnce;
+			expect(X.prototype.componentWillUnmount, 'X5').to.have.been.calledOnce;
+			expect(Y.prototype.componentWillMount, 'Y4').to.have.been.calledOnce;
+			expect(Y.prototype.componentWillUnmount, 'Y5').not.to.have.been.called;
+		});
+
+		it('should support nested router reset via base attr', () => {
+			class X {
+				componentWillMount() {}
+				componentWillUnmount() {}
+				render(){ return <div />; }
+			}
+			sinon.spy(X.prototype, 'componentWillMount');
+			sinon.spy(X.prototype, 'componentWillUnmount');
+			class Y {
+				componentWillMount() {}
+				componentWillUnmount() {}
+				render(){ return <div />; }
+			}
+			sinon.spy(Y.prototype, 'componentWillMount');
+			sinon.spy(Y.prototype, 'componentWillUnmount');
+			mount(
+				<Router base='/baz'>
+					<X path="/j" />
+					<Router path="/:bar*" base="/baz/foo">
+						<Y path="/k"/>
+					</Router>
+				</Router>
+			);
+			expect(X.prototype.componentWillMount).not.to.have.been.called;
+			expect(Y.prototype.componentWillMount).not.to.have.been.called;
+			route('/baz/j');
+			expect(X.prototype.componentWillMount).to.have.been.calledOnce;
+			expect(X.prototype.componentWillUnmount).not.to.have.been.called;
+			expect(Y.prototype.componentWillMount).not.to.have.been.called;
+			expect(Y.prototype.componentWillUnmount).not.to.have.been.called;
+			route('/baz/foo/k');
+			expect(X.prototype.componentWillMount).to.have.been.calledOnce;
+			expect(X.prototype.componentWillUnmount).to.have.been.calledOnce;
+			expect(Y.prototype.componentWillMount).to.have.been.calledOnce;
+			expect(Y.prototype.componentWillUnmount).not.to.have.been.called;
+		});
+
 		it('should support re-routing', done => {
 			class A {
 				componentWillMount() {