render all inside Router

Author: olegman

src/index.ts

@@ -5,7 +5,7 @@ import Link from './link';
 import RootRoute from './root-route';
 import Middleware from './middleware';
 import Redirect from './redirect';
-import PlaceHolder from './placeholder';
+import Placeholder from './placeholder';
 import { RouterError, Context } from 'router-async';
 
 export {
@@ -16,7 +16,7 @@ export {
     RootRoute,
     Middleware,
     Redirect,
-    PlaceHolder,
+    Placeholder,
     RouterError,
     Context
 };

src/placeholder.tsx

@@ -13,7 +13,7 @@ export interface State {
 export interface Context {
     router: Router
 }
-export default class PlaceHolder extends React.Component<Props, State> {
+export default class Placeholder extends React.Component<Props, State> {
     context: Context;
     static contextTypes = {
         router: React.PropTypes.object.isRequired
@@ -26,7 +26,7 @@ export default class PlaceHolder extends React.Component<Props, State> {
         };
     }
     componentDidMount() {
-        this.context.router.subscribe(({ Component, componentProps, path, location, renderCallback }) => {
+        this.context.router.subscribe(function ({ Component, componentProps, path, location, renderCallback }) {
             this.setState({
                 path,
                 location,
@@ -36,6 +36,7 @@ export default class PlaceHolder extends React.Component<Props, State> {
         })
     }
     render() {
-        return <this.state.Component {...this.state.componentProps} />
+        const { Component, componentProps } = this.context.router.getState();
+        return <Component {...componentProps} />
     }
 }

src/router.tsx

@@ -61,8 +61,6 @@ export default class Router extends React.Component<Props, State> {
         };
 
         this.router = router;
-        this.path = path;
-        this.location = location;
         this.subscriber = null;
     }
     static async init(opts: initParams): Promise<initResult> {
@@ -119,7 +117,7 @@ export default class Router extends React.Component<Props, State> {
         return router.runHooks('render', options);
     }
     subscribe(callback: Function) {
-        this.subscriber = callback;
+        this.subscriber = callback.bind(this);
     }
     changeComponent({ Component, componentProps, path, location, renderCallback }) {
         if (this.subscriber) {
@@ -132,8 +130,6 @@ export default class Router extends React.Component<Props, State> {
                 componentProps
             }, renderCallback);
         }
-        this.path = path;
-        this.location = location;
     }
     replaceComponent(Component, componentProps) {
         if (this.subscriber) {
@@ -146,10 +142,7 @@ export default class Router extends React.Component<Props, State> {
         }
     }
     getState() {
-        return {
-            path: this.path,
-            location: this.location
-        }
+        return this.state;
     }
     render() {
         if (this.props.children) {