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

README.md

@@ -51,6 +51,24 @@ 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 '/'
+  <Wrapper path="/app">   //will route '/app'
+    <Router>
+      <B path="/b"/>      //will route '/app/b'
+      <C path="/c" />     //will route '/app/c'
+    </Router>
+  </Wrapper>
+  <D path="/d" />         //will route '/d'
+  <E default />           //will route anything not listed above
+</Router>
+```
+
 
 
 ---

src/index.js

@@ -10,6 +10,7 @@ const EMPTY = {};
 // hangs off all elements created by preact
 const ATTR_KEY = typeof Symbol!=='undefined' ? Symbol.for('preactattr') : '__preactattr_';
 
+const CONTEXT_KEY = 'preact-router-base';
 
 function isPreactElement(node) {
 	return ATTR_KEY in node;
@@ -137,17 +138,25 @@ const Link = (props) => {
 
 
 class Router extends Component {
-	constructor(props) {
+	constructor(props, context) {
 		super(props);
+		this.baseUrl = this.props.base || '';
 		if (props.history) {
 			customHistory = props.history;
 		}
+		if (context && context[CONTEXT_KEY]) {
+			this.baseUrl = context[CONTEXT_KEY] + this.baseUrl;
+		}
 
 		this.state = {
 			url: this.props.url || getCurrentUrl()
 		};
 	}
 
+	getChildContext() {
+		return {CONTEXT_KEY: this.baseUrl};
+	}
+
 	shouldComponentUpdate(props) {
 		if (props.static!==true) return true;
 		return props.url!==this.props.url || props.onChange!==this.props.onChange;
@@ -193,7 +202,7 @@ class Router extends Component {
 
 	getMatchingChildren(children, url, invoke) {
 		return children.slice().sort(pathRankSort).filter( ({ attributes }) => {
-			let path = attributes.path,
+			let path = this.baseUrl + attributes.path,
 				matches = exec(url, path, attributes);
 			if (matches) {
 				if (invoke!==false) {

test/index.js

@@ -73,6 +73,27 @@ describe('preact-router', () => {
 			).to.equal(children[0]);
 		});
 
+		it('should support nested routes', () => {
+			let router = new Router({}, {'preact-router-base': '/foo'});
+			let children = [
+				<foo default />,
+				<foo path="/" />,
+				<foo path="/foo" />
+			];
+
+			expect(
+				router.render({ children }, { url:'/foo' })
+			).to.equal(children[1]);
+
+			expect(
+				router.render({ children }, { url:'/' })
+			).to.equal(children[0]);
+
+			expect(
+				router.render({ children }, { url:'/asdf/asdf' })
+			).to.equal(children[0]);
+		});
+
 		it('should support initial route prop', () => {
 			let router = new Router({ url:'/foo' });
 			let children = [