feat(Page): allow passing arbitrary props from Page to the pages

README.md

@@ -53,7 +53,11 @@ render(
 import { Page } from 'epic-react-router'
 ```
 
-Use the `<Page />` component anywhere in your layout to display the current page.
+Use the `<Page />` component anywhere in your layout to display the current page. Any props you pass to it will be handed over to the page components themselves:
+
+```jsx
+<Page onError={(error) => console.error(error)} />
+```
 
 ## Router
 

index.tsx

@@ -39,7 +39,7 @@ class RouterStore {
       addPage: action,
       // @ts-ignore
       listener: action,
-      Page: computed
+      Page: computed,
     })
 
     const { pathname, search } = history.location
@@ -59,12 +59,7 @@ class RouterStore {
     this.parameters = parse(search)
   }
 
-  go(
-    route: string,
-    parameters = {},
-    state: object = {},
-    replace = false
-  ) {
+  go(route: string, parameters = {}, state: object = {}, replace = false) {
     this.route = route
     this.parameters = parameters
 
@@ -143,4 +138,6 @@ class RouterStore {
 
 export const Router = new RouterStore()
 
-export const Page = observer(() => <Router.Page {...Router.parameters} />)
+export const Page = observer(({ ...props }: any) => (
+  <Router.Page {...props} {...Router.parameters} />
+))

package.json

@@ -5,33 +5,35 @@
   "repository": "github:tobua/epic-react-router",
   "license": "MIT",
   "scripts": {
+    "build": "padua build",
     "start": "padua watch",
     "test": "padua test"
   },
   "dependencies": {
     "history": "^5.0.0",
-    "query-string": "^6.13.5"
+    "query-string": "^6.13.7"
   },
   "peerDependencies": {
-    "mobx": "^6.0.1",
-    "mobx-react-lite": "^3.0.0",
-    "react": "^16.13.1"
+    "mobx": "^6.0.4",
+    "mobx-react-lite": "^3.1.6",
+    "react": "^17.0.1"
   },
   "main": "dist/index.js",
   "source": "index.tsx",
   "types": "dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "index.tsx"
   ],
   "devDependencies": {
     "@types/history": "^4.7.8",
-    "@types/react": "^16.9.51",
-    "mobx": "^6.0.1",
-    "mobx-react-lite": "^3.0.0",
-    "padua": "^0.1.1",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-test-renderer": "^16.13.1"
+    "@types/react": "^16.9.56",
+    "mobx": "^6.0.4",
+    "mobx-react-lite": "^3.1.6",
+    "padua": "^0.1.4",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-test-renderer": "^17.0.1"
   },
   "prettier": "padua/configuration/.prettierrc.json",
   "eslintConfig": {

test/page.test.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { create } from 'react-test-renderer'
+import { Page, Router } from '..'
+
+const Overview = () => <p>Overview</p>
+const Error = ({ onError }: { onError: (message: string) => void }) => (
+  <p>sending an error {onError('whatt?')}</p>
+)
+
+Router.setPages(
+  {
+    overview: Overview,
+    error: Error,
+  },
+  'overview'
+)
+
+test('Props handed to Page can be accessed from pages.', () => {
+  const errorMock = jest.fn()
+  expect(errorMock.mock.calls.length).toEqual(0)
+  Router.go('error')
+  create(<Page onError={errorMock} />)
+  expect(errorMock.mock.calls.length).toEqual(1)
+})