@breautek/router 4.1.3 → 5.0.0

package/dist/router.js

@@ -375,19 +375,17 @@ class RouteMatcher {
         }
         let props = {
             url: url,
-            base: base + componentToRender.props.url,
-            matcher: this,
+            __base: base + componentToRender.props.url,
+            __matcher: this,
             component: componentToRender.props.component,
             entryTransition: componentToRender.props.entryTransition,
             exitTransition: componentToRender.props.exitTransition,
-            componentProps: {
-                url: url,
-                router: this.$strategy
-            }
+            componentProps: componentToRender.props.componentProps,
+            __componentProps: Object.assign(Object.assign({}, componentToRender.props.componentProps), { url: url, router: this.$strategy })
         };
         if (params) {
             for (let i in params) {
-                props.componentProps[i] = params[i];
+                props.__componentProps[i] = params[i];
             }
         }
         return React.cloneElement(componentToRender, props);
@@ -502,7 +500,7 @@ class Router extends React__namespace.Component {
                 // currentRoute must be rendered as an array; because, exiting and incoming is rendered as an array.
                 // if currentRoute is not rendered as an array, a bug happens where the exiting screen is reloaded 
                 // calling the constructor again.
-                return React__namespace.createElement(Root, { router: this.getRouterStrategy(), url: this.state.url }, [currentRoute]);
+                return React__namespace.createElement(Root, Object.assign({}, this.props.componentProps, { router: this.getRouterStrategy(), url: this.state.url }), [currentRoute]);
             }
             else {
                 return currentRoute;
@@ -537,6 +535,8 @@ class Router extends React__namespace.Component {
                 this.$incomingRoute = null;
                 this.$exitingRoute = null;
                 this.setState({ shouldTransition: false });
+            }).catch((error) => {
+                console.error(error);
             });
         }
     }
@@ -602,14 +602,6 @@ class Router extends React__namespace.Component {
         return null;
     }
 }
-/**
- * @deprecated Use Router.getInstance() instead.
- * @returns {RouterStrategy}
- */
-let getRouter = () => {
-    console.warn('getRouter() is deprecated. use Router.getInstance() instead.');
-    return Router.getInstance();
-};
 
 /**
  * @notice Using the URLStrategy requires some backend configuration
@@ -739,9 +731,8 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
 };
 
 function insertStyle(css) {
-    if (typeof window === 'undefined') {
+    if (typeof window === 'undefined')
         return;
-    }
     const style = document.createElement('style');
     style.setAttribute('type', 'text/css');
     style.innerHTML = css;
@@ -758,6 +749,7 @@ class View extends React__namespace.Component {
     constructor(props) {
         super(props);
         this.$node = null;
+        this.state = this._initState();
     }
     /**
      * Return the CSS class on this view
@@ -777,6 +769,8 @@ class View extends React__namespace.Component {
     componentDidMount() {
         this.getTitle().then((title) => {
             this.props.router.setTitle(title);
+        }).catch((e) => {
+            console.error(e);
         });
         document.body.classList.add(this.$getViewBodyClass());
         let stylesheet = this.getViewStylesheet();
@@ -839,15 +833,15 @@ class Route extends React__namespace.Component {
     }
     $getComponentsToRender(component) {
         let url = component.props.url;
-        let base = component.props.base || '';
+        let base = component.props.__base || '';
         // eslint-disable-next-line @typescript-eslint/naming-convention
         let ViewComponent = component.props.component;
         let child;
-        let routeComponent = component.props.matcher.match(url, this.$getChildren(component), base);
+        let routeComponent = component.props.__matcher.match(url, this.$getChildren(component), base);
         if (routeComponent) {
             child = this.$getComponentsToRender(routeComponent);
         }
-        return (React__namespace.createElement(ViewComponent, Object.assign({}, component.props.componentProps, { ref: (node) => {
+        return (React__namespace.createElement(ViewComponent, Object.assign({}, component.props.componentProps, component.props.__componentProps, { ref: (node) => {
                 if (node) {
                     if (node instanceof View) {
                         this.$node = node;
@@ -864,7 +858,6 @@ class Route extends React__namespace.Component {
     $getChildren(component) {
         let children = null;
         if (!component) {
-            // eslint-disable-next-line @typescript-eslint/no-this-alias
             component = this;
         }
         if (!component.props.children) {
@@ -1017,88 +1010,9 @@ class TransitionSlide extends TransitionStrategy {
     }
 }
 
-var name = "@breautek/router";
-var version = "4.1.3";
-var description = "An alternate react router.";
-var main = "dist/router.js";
-var types = "dist/src/api.d.ts";
-var type = "commonjs";
-var publishConfig = {
-	registry: "https://registry.npmjs.org"
-};
-var scripts = {
-	test: "jest",
-	lint: "eslint --ext .ts,.tsx '?(src|spec)/**/*.?(ts|tsx)' --cache",
-	build: "rollup -c rollup.config.js --bundleConfigAsCjs",
-	"publish-beta": "npm publish --tag beta",
-	prepublishOnly: "npm run build",
-	version: "npm run-script build",
-	postversion: "git push && git push --tags"
-};
-var repository = {
-	type: "git",
-	url: "https://github.com/breautek/router"
-};
-var keywords = [
-	"react",
-	"router",
-	"page",
-	"screen",
-	"navigation"
-];
-var author = "norman@normanbreau.com";
-var license = "MIT";
-var homepage = "https://github.com/breautek/router";
-var peerDependencies = {
-	react: "16.x || 17.x || 18.x",
-	"react-dom": "16.x || 17.x || 18.x"
-};
-var devDependencies = {
-	"@rollup/plugin-commonjs": "28.0.1",
-	"@rollup/plugin-json": "6.1.0",
-	"@rollup/plugin-node-resolve": "15.3.0",
-	"@testing-library/jest-dom": "6.6.3",
-	"@testing-library/react": "16.0.1",
-	"@types/jest": "29.5.14",
-	"@types/react": "18.3.12",
-	"@types/react-dom": "18.3.1",
-	"@typescript-eslint/eslint-plugin": "7.18.0",
-	"@typescript-eslint/parser": "7.18.0",
-	ajv: "8.17.1",
-	eslint: "8.57.1",
-	"eslint-plugin-react": "7.37.2",
-	glob: "11.0.0",
-	"ignore-styles": "5.0.1",
-	jest: "29.7.0",
-	"jest-environment-jsdom": "29.7.0",
-	"node-sass": "9.0.0",
-	react: "18.3.1",
-	"react-dom": "18.3.1",
-	rollup: "4.24.4",
-	"rollup-plugin-progress": "1.1.2",
-	"rollup-plugin-sass": "1.14.0",
-	"rollup-plugin-typescript2": "0.36.0",
-	"ts-jest": "29.2.5",
-	"ts-node": "10.9.2",
-	typescript: "5.5.4"
-};
+var version = "5.0.0";
 var packageInfo = {
-	name: name,
-	version: version,
-	description: description,
-	main: main,
-	types: types,
-	type: type,
-	publishConfig: publishConfig,
-	scripts: scripts,
-	repository: repository,
-	keywords: keywords,
-	author: author,
-	license: license,
-	homepage: homepage,
-	peerDependencies: peerDependencies,
-	devDependencies: devDependencies
-};
+	version: version};
 
 const VERSION = packageInfo.version;
 
@@ -1113,6 +1027,5 @@ exports.TransitionSlide = TransitionSlide;
 exports.TransitionStrategy = TransitionStrategy;
 exports.URLStrategy = URLStrategy;
 exports.View = View;
-exports.getRouter = getRouter;
 exports.version = VERSION;
 //# sourceMappingURL=router.js.map

package/dist/src/IOnNoRoute.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { IRouteProps } from 'Route';
 export interface IOnNoRoute {
-    (indexRoute: React.ReactElement, routes: Array<React.ReactElement>): React.ReactElement;
+    (indexRoute: React.ReactElement<IRouteProps>, routes: React.ReactElement<IRouteProps>[]): React.ReactElement<IRouteProps>;
 }

package/dist/src/Route.d.ts

@@ -3,24 +3,27 @@ import { View } from './View';
 import { RouteMatcher } from './RouteMatcher';
 import { RouterStrategy } from './RouterStrategy';
 import { TransitionStrategy } from './TransitionStrategy';
-export interface IRouteProps<T> {
+export interface IRouteProps<TUserProps = any, TInternalProps extends IComponentProps = IComponentProps> {
     url: string;
     component: React.ComponentClass<any>;
     index?: boolean;
     entryTransition?: TransitionStrategy;
     exitTransition?: TransitionStrategy;
+    children?: React.ReactElement<IRouteProps> | React.ReactElement<IRouteProps>[];
+    componentProps?: TUserProps;
+    ref?: React.Ref<Route>;
     /**
      * @internal
      */
-    base?: string;
+    __base?: string;
     /**
      * @internal
      */
-    componentProps?: T;
+    __componentProps?: TInternalProps;
     /**
      * @internal
      */
-    matcher?: RouteMatcher;
+    __matcher?: RouteMatcher;
 }
 export interface IComponentProps {
     url: string;

package/dist/src/RouteMatcher.d.ts

@@ -1,3 +1,4 @@
+import { IRouteProps } from './Route';
 import { RouterStrategy } from './RouterStrategy';
 /**
  * Will be invoked when no routes are found. Default implementation is to simply return the `indexRoute`.
@@ -6,7 +7,7 @@ import { RouterStrategy } from './RouterStrategy';
  * @returns {React.ReactElement} An `ReactElement` of a `Route`
  */
 export interface IOnNoRouteFunction {
-    (indexRoute: React.ReactElement, routes: Array<React.ReactElement>): React.ReactElement;
+    (indexRoute: React.ReactElement, routes: React.ReactElement<IRouteProps>[]): React.ReactElement<IRouteProps>;
 }
 /**
  * This class is reponsible for determing which route to render
@@ -25,5 +26,5 @@ export declare class RouteMatcher {
      * @param indexRoute
      * @param onNoRoute
      */
-    match(url: string, children: Array<React.ReactElement>, base: string, indexRoute?: React.ReactElement, onNoRoute?: IOnNoRouteFunction): React.ReactElement;
+    match(url: string, children: React.ReactElement<IRouteProps>[], base: string, indexRoute?: React.ReactElement<IRouteProps>, onNoRoute?: IOnNoRouteFunction): React.ReactElement<IRouteProps>;
 }

package/dist/src/Router.d.ts

@@ -2,9 +2,10 @@ import * as React from 'react';
 import { RouterStrategy } from './RouterStrategy';
 import { IRouterStrategyClass } from './IRouterStrategyClass';
 import { IOnNoRoute } from './IOnNoRoute';
-export interface IRouterProps {
+export interface IRouterProps<T = any> {
     strategy?: IRouterStrategyClass;
     component: React.ComponentClass<any>;
+    componentProps?: T;
     children?: React.ReactNode;
     onNoRoute?: IOnNoRoute;
 }
@@ -13,7 +14,7 @@ export interface IRouterState {
     url: string;
     shouldTransition: boolean;
 }
-export declare class Router<TRouterProps extends IRouterProps = IRouterProps> extends React.Component<TRouterProps, IRouterState> {
+export declare class Router<TUserProps = any, TRouterProps extends IRouterProps<TUserProps> = IRouterProps<TUserProps>> extends React.Component<TRouterProps, IRouterState> {
     state: IRouterState;
     private $lastRenderedRoute;
     private $matcher;
@@ -82,8 +83,3 @@ export declare class Router<TRouterProps extends IRouterProps = IRouterProps> ex
      */
     private $getIndexRoute;
 }
-/**
- * @deprecated Use Router.getInstance() instead.
- * @returns {RouterStrategy}
- */
-export declare let getRouter: () => RouterStrategy;

package/dist/src/View.d.ts

@@ -8,12 +8,17 @@ export interface IViewProps {
     entryTransition?: TransitionStrategy;
     exitTransition?: TransitionStrategy;
 }
-export declare abstract class View<TPageProps extends IViewProps = IViewProps> extends React.Component<TPageProps> {
+export interface IViewState {
+}
+export interface IViewSnapshotState {
+}
+export declare abstract class View<TPageProps extends IViewProps = IViewProps, TPageState extends IViewState = IViewState, TPageSnapshotState extends IViewSnapshotState = IViewSnapshotState> extends React.Component<TPageProps, TPageState, TPageSnapshotState> {
     private $node;
     /**
      * @param props See [IViewProps]
      */
     constructor(props: TPageProps);
+    protected abstract _initState(): TPageState;
     /**
      * Return the CSS class on this view
      */

package/eslint.config.js

@@ -0,0 +1,14 @@
+
+let commonConfig = require('@totalpave/eslint-plugin').default;
+
+module.exports = [
+    ...commonConfig,
+    {
+        languageOptions: {
+            parserOptions: {
+                "project": "./spec/tsconfig.json",
+                "tsconfigRootDir": __dirname
+            }
+        }
+    }
+]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@breautek/router",
-  "version": "4.1.3",
+  "version": "5.0.0",
   "description": "An alternate react router.",
   "main": "dist/router.js",
   "types": "dist/src/api.d.ts",
@@ -10,7 +10,8 @@
   },
   "scripts": {
     "test": "jest",
-    "lint": "eslint --ext .ts,.tsx '?(src|spec)/**/*.?(ts|tsx)' --cache",
+    "lint": "eslint ./src ./spec",
+    "lint:fix": "eslint --fix ./src ./spec",
     "build": "rollup -c rollup.config.js --bundleConfigAsCjs",
     "publish-beta": "npm publish --tag beta",
     "prepublishOnly": "npm run build",
@@ -32,36 +33,40 @@
   "license": "MIT",
   "homepage": "https://github.com/breautek/router",
   "peerDependencies": {
-    "react": "16.x || 17.x || 18.x",
-    "react-dom": "16.x || 17.x || 18.x"
+    "react": "16.x || 17.x || 18.x || 19.x",
+    "react-dom": "16.x || 17.x || 18.x || 19.x"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "28.0.1",
+    "@jest/types": "30.2.0",
+    "@rollup/plugin-commonjs": "29.0.0",
     "@rollup/plugin-json": "6.1.0",
-    "@rollup/plugin-node-resolve": "15.3.0",
-    "@testing-library/jest-dom": "6.6.3",
-    "@testing-library/react": "16.0.1",
-    "@types/jest": "29.5.14",
-    "@types/react": "18.3.12",
-    "@types/react-dom": "18.3.1",
-    "@typescript-eslint/eslint-plugin": "7.18.0",
-    "@typescript-eslint/parser": "7.18.0",
+    "@rollup/plugin-node-resolve": "16.0.3",
+    "@testing-library/dom": "10.4.1",
+    "@testing-library/jest-dom": "6.9.1",
+    "@testing-library/react": "16.3.2",
+    "@totalpave/eslint-plugin": "7.0.17",
+    "@types/jest": "30.0.0",
+    "@types/react": "19.2.10",
+    "@types/react-dom": "19.2.3",
     "ajv": "8.17.1",
-    "eslint": "8.57.1",
-    "eslint-plugin-react": "7.37.2",
-    "glob": "11.0.0",
+    "glob": "13.0.1",
     "ignore-styles": "5.0.1",
-    "jest": "29.7.0",
-    "jest-environment-jsdom": "29.7.0",
-    "node-sass": "9.0.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "rollup": "4.24.4",
+    "jest": "30.2.0",
+    "jest-environment-jsdom": "30.2.0",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "rollup": "4.57.1",
     "rollup-plugin-progress": "1.1.2",
-    "rollup-plugin-sass": "1.14.0",
+    "rollup-plugin-sass": "1.15.3",
     "rollup-plugin-typescript2": "0.36.0",
-    "ts-jest": "29.2.5",
+    "sass": "1.97.3",
+    "ts-jest": "29.4.6",
     "ts-node": "10.9.2",
-    "typescript": "5.5.4"
+    "typescript": "5.9.3"
+  },
+  "dependencies": {
+    "@types/events": "3.0.3",
+    "events": "3.3.0",
+    "tslib": "2.8.1"
   }
 }

package/pnpm-workspace.yaml

@@ -0,0 +1,7 @@
+onlyBuiltDependencies:
+  - '@parcel/watcher'
+  - node-sass
+  - unrs-resolver
+
+publicHoistPattern:
+  - eslint

package/src/HashStrategy.ts

@@ -11,7 +11,7 @@ import { Router } from './Router';
 */
 export class HashStrategy extends RouterStrategy {
     private $base: string;
-    private $stack: Array<string>;
+    private $stack: string[];
     private $position: number;
     private $lastFiredLocation: string;
 

package/src/IOnNoRoute.ts

@@ -1,6 +1,7 @@
 
 import * as React from 'react';
+import { IRouteProps } from 'Route';
 
 export interface IOnNoRoute {
-    (indexRoute: React.ReactElement, routes: Array<React.ReactElement>): React.ReactElement;
+    (indexRoute: React.ReactElement<IRouteProps>, routes: React.ReactElement<IRouteProps>[]): React.ReactElement<IRouteProps>;
 }

package/src/Route.tsx

@@ -5,27 +5,30 @@ import { RouteMatcher } from './RouteMatcher';
 import { RouterStrategy } from './RouterStrategy';
 import { TransitionStrategy } from './TransitionStrategy';
 
-export interface IRouteProps<T> {
+export interface IRouteProps<TUserProps = any, TInternalProps extends IComponentProps = IComponentProps> {
     url: string;
     component: React.ComponentClass<any>;
     index?: boolean;
     entryTransition?: TransitionStrategy;
     exitTransition?: TransitionStrategy;
+    children?: React.ReactElement<IRouteProps> | React.ReactElement<IRouteProps>[];
+    componentProps?: TUserProps;
+    ref?: React.Ref<Route>;
 
     /**
      * @internal
      */
-    base?: string;
+    __base?: string;
 
     /**
      * @internal
      */
-    componentProps?: T;
+    __componentProps?: TInternalProps;
 
     /**
      * @internal
      */
-    matcher?: RouteMatcher;
+    __matcher?: RouteMatcher;
 }
 
 export interface IComponentProps {
@@ -38,10 +41,7 @@ export interface IComponentProps {
     [key: string]: any;
 }
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface IRouteState {
-
-}
+export interface IRouteState {}
 
 /**
  * This class represents a route that renders a {@link View} component
@@ -62,22 +62,25 @@ export class Route<TComponentProps extends IComponentProps = IComponentProps, TR
         return this.$node;
     }
 
-    private $getComponentsToRender(component: React.ReactElement | React.Component): React.ReactNode {
+    private $getComponentsToRender(component: React.ReactElement<IRouteProps> | React.Component<IRouteProps>): React.ReactNode {
         let url: string = component.props.url;
-        let base: string = component.props.base || '';
+        let base: string = component.props.__base || '';
 
         // eslint-disable-next-line @typescript-eslint/naming-convention
         let ViewComponent: React.ElementType = component.props.component;
         let child: React.ReactNode;
 
-        let routeComponent = component.props.matcher.match(url, this.$getChildren(component), base);
+        let routeComponent: React.ReactElement<IRouteProps> = component.props.__matcher.match(url, this.$getChildren(component), base);
         if (routeComponent) {
             child = this.$getComponentsToRender(routeComponent);
         }
 
         return (
             <ViewComponent
-                {...component.props.componentProps}
+                {...{
+                    ...component.props.componentProps,
+                    ...component.props.__componentProps
+                }}
                 ref={(node: React.Component) => {
                     if (node) {
                         if (node instanceof View) {
@@ -97,11 +100,10 @@ export class Route<TComponentProps extends IComponentProps = IComponentProps, TR
         );
     }
 
-    private $getChildren(component: React.Component | React.ReactElement): React.ReactElement[] {
-        let children: React.ReactElement[] = null;
+    private $getChildren(component: React.Component<IRouteProps> | React.ReactElement<IRouteProps>): React.ReactElement<IRouteProps>[] {
+        let children: React.ReactElement<IRouteProps>[] = null;
 
         if (!component) {
-            // eslint-disable-next-line @typescript-eslint/no-this-alias
             component = this;
         }
         
@@ -110,10 +112,10 @@ export class Route<TComponentProps extends IComponentProps = IComponentProps, TR
         }
 
         if (component.props.children instanceof Array) {
-            children = component.props.children as React.ReactElement[];
+            children = component.props.children as React.ReactElement<IRouteProps>[];
         }
         else {
-            children = [ component.props.children as React.ReactElement ];
+            children = [ component.props.children as React.ReactElement<IRouteProps> ];
         }
 
         return children;

package/src/RouteMatcher.ts

@@ -11,7 +11,7 @@ import {RouterStrategy} from './RouterStrategy';
  * @returns {React.ReactElement} An `ReactElement` of a `Route`
  */
 export interface IOnNoRouteFunction {
-    (indexRoute: React.ReactElement, routes: Array<React.ReactElement>): React.ReactElement;
+    (indexRoute: React.ReactElement, routes: React.ReactElement<IRouteProps>[]): React.ReactElement<IRouteProps>;
 }
 
 /**
@@ -25,7 +25,7 @@ export class RouteMatcher {
         this.$strategy = routerStrategy;
     }
 
-    private $defaultNoRouteFunction(indexRoute: React.ReactElement, routes: Array<React.ReactElement>): React.ReactElement {
+    private $defaultNoRouteFunction(indexRoute: React.ReactElement<IRouteProps>, routes: React.ReactElement<IRouteProps>[]): React.ReactElement<IRouteProps> {
         return indexRoute;
     }
 
@@ -38,11 +38,11 @@ export class RouteMatcher {
      * @param indexRoute 
      * @param onNoRoute
      */
-    public match(url: string, children: Array<React.ReactElement>, base: string, indexRoute?: React.ReactElement, onNoRoute?: IOnNoRouteFunction): React.ReactElement {
-        let componentToRender: React.ReactElement = null;
+    public match(url: string, children: React.ReactElement<IRouteProps>[], base: string, indexRoute?: React.ReactElement<IRouteProps>, onNoRoute?: IOnNoRouteFunction): React.ReactElement<IRouteProps> {
+        let componentToRender: React.ReactElement<IRouteProps> = null;
         let params: IURLParams = null;
         for (let i: number = 0; i < children.length; i++) {
-            let route: React.ReactElement = children[i];
+            let route: React.ReactElement<IRouteProps> = children[i];
             let shouldAllowPartialMatching: boolean = !!route.props.children;
             let parser: URLParser = new URLParser(base + route.props.url, shouldAllowPartialMatching);
             params = parser.parse(url);
@@ -63,14 +63,16 @@ export class RouteMatcher {
             return null;
         }
 
-        let props: IRouteProps<IComponentProps> = {
+        let props: IRouteProps<any, IComponentProps> = {
             url : url,
-            base: base + componentToRender.props.url,
-            matcher: this,
+            __base: base + componentToRender.props.url,
+            __matcher: this,
             component: componentToRender.props.component,
             entryTransition: componentToRender.props.entryTransition,
             exitTransition: componentToRender.props.exitTransition,
-            componentProps: {
+            componentProps: componentToRender.props.componentProps,
+            __componentProps: {
+                ...componentToRender.props.componentProps,
                 url : url,
                 router: this.$strategy
             }
@@ -78,7 +80,7 @@ export class RouteMatcher {
 
         if (params) {
             for (let i in params) {
-                props.componentProps[i] = params[i];
+                props.__componentProps[i] = params[i];
             }
         }
 

package/src/Router.tsx

@@ -6,11 +6,12 @@ import {RouteMatcher} from './RouteMatcher';
 import { RouterStrategy } from './RouterStrategy';
 import { IRouterStrategyClass } from './IRouterStrategyClass';
 import {IOnNoRoute} from './IOnNoRoute';
-import { Route } from "./Route";
+import { IRouteProps, Route } from "./Route";
 
-export interface IRouterProps {
+export interface IRouterProps<T = any> {
     strategy?: IRouterStrategyClass;
     component: React.ComponentClass<any>;
+    componentProps?: T;
     children?: React.ReactNode;
     onNoRoute?: IOnNoRoute;
 }
@@ -21,7 +22,7 @@ export interface IRouterState {
     shouldTransition: boolean;
 }
 
-export class Router<TRouterProps extends IRouterProps = IRouterProps> extends React.Component<TRouterProps, IRouterState> {
+export class Router<TUserProps = any, TRouterProps extends IRouterProps<TUserProps> = IRouterProps<TUserProps>> extends React.Component<TRouterProps, IRouterState> {
     public state: IRouterState;
     
     private $lastRenderedRoute: any;
@@ -115,7 +116,7 @@ export class Router<TRouterProps extends IRouterProps = IRouterProps> extends Re
      * @ignore
      */
     public render(): React.ReactNode {
-        let currentRoute: React.ReactElement = this.$matcher.match(this.state.url || '/', this.$getChildren(), '', this.$getIndexRoute(), this.props.onNoRoute);
+        let currentRoute: React.ReactElement<IRouteProps> = this.$matcher.match(this.state.url || '/', this.$getChildren(), '', this.$getIndexRoute(), this.props.onNoRoute);
         // eslint-disable-next-line @typescript-eslint/naming-convention
         let Root: React.ElementType = null;
         if (this.props.component) {
@@ -141,7 +142,7 @@ export class Router<TRouterProps extends IRouterProps = IRouterProps> extends Re
             }
 
             // Incoming will always be safe to render, hence no defensive checks
-            let incoming: React.ReactElement = React.cloneElement(currentRoute, {
+            let incoming: React.ReactElement<IRouteProps> = React.cloneElement(currentRoute, {
                 ref : (route: Route) => {
                     this.$incomingRoute = route;
                 }
@@ -161,7 +162,7 @@ export class Router<TRouterProps extends IRouterProps = IRouterProps> extends Re
                 // currentRoute must be rendered as an array; because, exiting and incoming is rendered as an array.
                 // if currentRoute is not rendered as an array, a bug happens where the exiting screen is reloaded 
                 // calling the constructor again.
-                return <Root router={this.getRouterStrategy()} url={this.state.url}>{[ currentRoute ]}</Root>;
+                return <Root {...this.props.componentProps} router={this.getRouterStrategy()} url={this.state.url}>{[ currentRoute ]}</Root>;
             }
             else {
                 return currentRoute;
@@ -198,6 +199,8 @@ export class Router<TRouterProps extends IRouterProps = IRouterProps> extends Re
                 this.$incomingRoute = null;
                 this.$exitingRoute = null;
                 this.setState({shouldTransition: false});
+            }).catch((error: Error) => {
+                console.error(error);
             });
         }
     }
@@ -245,14 +248,14 @@ export class Router<TRouterProps extends IRouterProps = IRouterProps> extends Re
     /**
      * Gets the potential routes
      */
-    private $getChildren(): React.ReactElement[] {
-        let children: React.ReactElement[] = null;
+    private $getChildren(): React.ReactElement<IRouteProps>[] {
+        let children: React.ReactElement<IRouteProps>[] = null;
 
         if (this.props.children instanceof Array) {
-            children = this.props.children as React.ReactElement[];
+            children = this.props.children as React.ReactElement<IRouteProps>[];
         }
         else {
-            children = [ this.props.children as React.ReactElement ];
+            children = [ this.props.children as React.ReactElement<IRouteProps> ];
         }
 
         return children;
@@ -261,10 +264,10 @@ export class Router<TRouterProps extends IRouterProps = IRouterProps> extends Re
     /**
      * Finds the index route. Returns null if there are no indexed routes.
      */
-    private $getIndexRoute(): React.ReactElement {
-        let children: React.ReactElement[] = this.$getChildren();
+    private $getIndexRoute(): React.ReactElement<IRouteProps> {
+        let children: React.ReactElement<IRouteProps>[] = this.$getChildren();
         for (let i: number = 0; i < children.length; i++) {
-            let child: React.ReactElement = children[i];
+            let child: React.ReactElement<IRouteProps> = children[i];
             if (child.props.index) {
                 return child;
             }
@@ -273,12 +276,3 @@ export class Router<TRouterProps extends IRouterProps = IRouterProps> extends Re
         return null;
     }
 }
-
-/**
- * @deprecated Use Router.getInstance() instead.
- * @returns {RouterStrategy}
- */
-export let getRouter = (): RouterStrategy => {
-    console.warn('getRouter() is deprecated. use Router.getInstance() instead.');
-    return Router.getInstance();
-}

package/src/TransitionSlide.ts

@@ -61,7 +61,7 @@ export class TransitionSlide extends TransitionStrategy {
             exitingNode.style.transition = transitionString;
 
             //Add transition listener
-            let onTransitionEnd = () => {
+            let onTransitionEnd = (): void => {
                 //cleanup
                 incomingNode.removeEventListener('transitionend', onTransitionEnd);
                 

package/src/URLParser.ts

@@ -30,8 +30,8 @@ export class URLParser {
      */
     public parse(url: string): IURLParams {
         url = this.$stripURL(url);
-        let parts: Array<string> = this.$getParts(url);
-        let patternParts: Array<string> = this.$getParts(this.$pattern);
+        let parts: string[] = this.$getParts(url);
+        let patternParts: string[] = this.$getParts(this.$pattern);
 
         if ((!this.$allowPartialMatch && parts.length !== patternParts.length) || url === '') {
             return null;
@@ -84,7 +84,7 @@ export class URLParser {
      * @private
      * @param {string} url URL to split
      */
-    private $getParts(url: string): Array<string> {
+    private $getParts(url: string): string[] {
         url = this.$stripURL(url);
         return url.split('/');
     }

package/src/URLStrategy.ts

@@ -12,7 +12,7 @@ import { Router } from './Router';
  */
 export class URLStrategy extends RouterStrategy {
     private $base: string;
-    private $stack: Array<string>;
+    private $stack: string[];
     private $position: number;
 
     /**

package/src/View.tsx

@@ -12,7 +12,11 @@ export interface IViewProps {
     exitTransition?: TransitionStrategy;
 }
 
-export abstract class View<TPageProps extends IViewProps = IViewProps> extends React.Component<TPageProps> {
+export interface IViewState {}
+
+export interface IViewSnapshotState {}
+
+export abstract class View<TPageProps extends IViewProps = IViewProps, TPageState extends IViewState = IViewState, TPageSnapshotState extends IViewSnapshotState = IViewSnapshotState> extends React.Component<TPageProps, TPageState, TPageSnapshotState> {
     private $node: HTMLDivElement;
 
     /**
@@ -21,8 +25,11 @@ export abstract class View<TPageProps extends IViewProps = IViewProps> extends R
     public constructor(props: TPageProps) {
         super(props);
         this.$node = null;
+        this.state = this._initState();
     }
 
+    protected abstract _initState(): TPageState;
+
     /**
      * Return the CSS class on this view
      */
@@ -44,6 +51,8 @@ export abstract class View<TPageProps extends IViewProps = IViewProps> extends R
     public componentDidMount(): void {
         this.getTitle().then((title: string) => {
             this.props.router.setTitle(title);
+        }).catch((e) => {
+            console.error(e);
         });
 
         document.body.classList.add(this.$getViewBodyClass());