Fixed: navigation now offers a proper scroll behavior.

Not more weird page updates.

Closes #285

CHANGELOG.md

@@ -1,5 +1,9 @@
 ## HEAD
 
+- Fixed: navigation now offers a proper scroll behavior.
+  Not more weird page updates.
+  ([#285](https://github.com/MoOx/phenomic/issues/285) - @MoOx)
+
 ### Boilerplate
 
 - Added: ``PageLoading`` now use "Loading..." has a title

interfaces/external-modules/react-router-scroll.js

@@ -0,0 +1,4 @@
+declare module "react-router-scroll" {
+  declare var exports:
+    (shouldUpdateScroll?: () => boolean | Array<number>) => Function;
+}

interfaces/external-modules/react-router.js

@@ -0,0 +1,36 @@
+declare module "react-router" {
+  declare interface ReactRouter {
+    IndexRoute: React.Component;
+    Link: React.Component;
+    Redirect: React.Component;
+    IndexRedirect: React.Component;
+    Route: React.Component;
+    Router: React.Component;
+    browserHistory: any;
+    useRouterHistory:
+      (historyFactory: Function) => (options: ?Object) => Object;
+    match: Function;
+    RouterContext: React.Component;
+    createRoutes: (routes: React$Element) => Array<Object>;
+    formatPattern: (pattern: string, params: Object) => string;
+    applyRouterMiddleware: Function;
+  }
+  declare var exports: ReactRouter;
+}
+
+declare module "react-router/lib/PatternUtils" {
+  declare var exports: any;
+}
+
+declare module "history/lib/createBrowserHistory" {
+  declare var exports: any;
+}
+
+export type ReactRouterProps = {
+  history: Object,
+  location: Object,
+  params: Object,
+  route: Object,
+  routeParams: Object,
+  routes: Array<Object>,
+}

package.json

@@ -59,6 +59,7 @@
     "opn": "^4.0.2",
     "pify": "^2.3.0",
     "portfinder": "^1.0.2",
+    "react-router-scroll": "^0.2.0",
     "redbox-react": "^1.2.2",
     "remark": "^4.1.1",
     "remark-autolink-headings": "^3.0.0",

src/client/index.js

@@ -2,8 +2,9 @@
 // App
 import React from "react"
 import ReactDOM from "react-dom"
-import { Router, useRouterHistory } from "react-router"
+import { Router, useRouterHistory, applyRouterMiddleware } from "react-router"
 import createBrowserHistory from "history/lib/createBrowserHistory"
+import useScroll from "react-router-scroll"
 import { Provider as ReduxContextProvider } from "react-redux"
 
 import PhenomicContextProvider from "../ContextProvider"
@@ -35,7 +36,11 @@ export default function phenomic({
       metadata={ metadata }
     >
       <ReduxContextProvider store={ store }>
-        <Router history={ browserHistory } routes={ routes } />
+        <Router
+          history={ browserHistory }
+          routes={ routes }
+          render={ applyRouterMiddleware(useScroll()) }
+        />
       </ReduxContextProvider>
     </PhenomicContextProvider>,
     document.getElementById("phenomic")