Rebase #100

README.md

@@ -56,6 +56,22 @@ You can also make params optional by adding a `?` to it.
 </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;
 
@@ -8,6 +8,8 @@ const ROUTERS = [];
 const subscribers = [];
 
 const EMPTY = {};
+//a key for the context to carry baseUrl to nested Router instances
+const CONTEXT_KEY = 'preact-router-baseUrl';
 
 function isPreactElement(node) {
 	return node.__preactattr_!=null || typeof Symbol!=='undefined' && node[Symbol.for('preactattr')]!=null;
@@ -146,19 +148,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 +229,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) {
@@ -257,12 +275,43 @@ const Link = (props) => (
 
 const Route = props => h(props.component, props);
 
+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[CONTEXT_KEY]) {
+			this.baseUrl = context[CONTEXT_KEY] + this.baseUrl;
+		}
+	}
+
+	getChildContext() {
+		let result = {[CONTEXT_KEY]: this.baseUrl};
+		return result;
+	}
+
+	render({ children, url, matches }) {
+		return cloneElement(children[0], {url, matches});
+	}
+
+}
+
+
 Router.subscribers = subscribers;
 Router.getCurrentUrl = getCurrentUrl;
 Router.route = route;
 Router.Router = Router;
 Router.Route = Route;
 Router.Link = Link;
+Router.Match = Match;
 
-export { subscribers, getCurrentUrl, route, Router, Route, Link };
+export { subscribers, getCurrentUrl, route, Router, Route, Match, Link };
 export default Router;

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));
 	}
 }