Migrate next/router to use React.createContext (#6030)

Fixes parts of #5716. I had some issues with the test suite but I'm fairly certain that I got it working correctly.

packages/next-server/lib/router/router.js

@@ -1,10 +1,13 @@
 /* global __NEXT_DATA__ */
 
+import React from 'react'
 import { parse, format } from 'url'
 import mitt from '../mitt'
 import shallowEquals from './shallow-equals'
 import { loadGetInitialProps, getURL } from '../utils'
 
+export const RouterContext = React.createContext()
+
 export default class Router {
   static events = mitt()
 

packages/next-server/package.json

@@ -36,8 +36,8 @@
     "url": "0.11.0"
   },
   "peerDependencies": {
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0"
+    "react": "^16.3.0",
+    "react-dom": "^16.3.0"
   },
   "devDependencies": {
     "@taskr/clear": "1.1.0",

packages/next-server/server/render.tsx

@@ -2,7 +2,7 @@ import {IncomingMessage, ServerResponse} from 'http'
 import { ParsedUrlQuery } from 'querystring'
 import React from 'react'
 import { renderToString, renderToStaticMarkup } from 'react-dom/server'
-import Router from '../lib/router/router'
+import Router, { RouterContext } from '../lib/router/router'
 import { loadGetInitialProps, isResSent } from '../lib/utils'
 import Head, { defaultHead } from '../lib/head'
 import Loadable from '../lib/loadable'
@@ -169,11 +169,13 @@ export async function renderToHTML (req: IncomingMessage, res: ServerResponse, p
 
     return render(renderElementToString,
       <LoadableCapture report={(moduleName) => reactLoadableModules.push(moduleName)}>
-        <EnhancedApp
-          Component={EnhancedComponent}
-          router={router}
-          {...props}
-        />
+        <RouterContext.Provider value={router}>
+          <EnhancedApp
+            Component={EnhancedComponent}
+            router={router}
+            {...props}
+          />
+        </RouterContext.Provider>
       </LoadableCapture>
     )
   }

packages/next/client/index.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import HeadManager from './head-manager'
-import { createRouter } from 'next/router'
+import { createRouter, makePublicRouterInstance, RouterContext } from 'next/router'
 import mitt from 'next-server/dist/lib/mitt'
 import {loadGetInitialProps, getURL} from 'next-server/dist/lib/utils'
 import PageLoader from './page-loader'
@@ -180,7 +180,9 @@ async function doRender ({ App, Component, props, err, emitter: emitterProp = em
   // In development runtime errors are caught by react-error-overlay.
   if (process.env.NODE_ENV === 'development') {
     renderReactElement((
-      <App {...appProps} />
+      <RouterContext.Provider value={makePublicRouterInstance(router)}>
+        <App {...appProps} />
+      </RouterContext.Provider>
     ), appContainer)
   } else {
     // In production we catch runtime errors using componentDidCatch which will trigger renderError.
@@ -193,7 +195,9 @@ async function doRender ({ App, Component, props, err, emitter: emitterProp = em
     }
     renderReactElement((
       <ErrorBoundary onError={onError}>
-        <App {...appProps} />
+        <RouterContext.Provider value={makePublicRouterInstance(router)}>
+          <App {...appProps} />
+        </RouterContext.Provider>
       </ErrorBoundary>
     ), appContainer)
   }

packages/next/client/router.js

@@ -75,6 +75,9 @@ export default SingletonRouter
 // Reexport the withRoute HOC
 export { default as withRouter } from './with-router'
 
+// Export RouterContext
+export { RouterContext } from 'next-server/dist/lib/router/router'
+
 // INTERNAL APIS
 // -------------
 // (do not use following exports inside the app)

packages/next/client/with-router.js

@@ -1,25 +1,25 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
+import React from 'react'
 import hoistStatics from 'hoist-non-react-statics'
 import { getDisplayName } from 'next-server/dist/lib/utils'
+import { RouterContext } from './router'
 
 export default function withRouter (ComposedComponent) {
   const displayName = getDisplayName(ComposedComponent)
 
-  class WithRouteWrapper extends Component {
-    static contextTypes = {
-      router: PropTypes.object
-    }
-
-    static displayName = `withRouter(${displayName})`
-
-    render () {
-      return <ComposedComponent
-        router={this.context.router}
-        {...this.props}
-      />
-    }
+  function WithRouteWrapper (props) {
+    return (
+      <RouterContext.Consumer>
+        {router => (
+          <ComposedComponent
+            router={router}
+            {...props}
+          />
+        )}
+      </RouterContext.Consumer>
+    )
   }
 
+  WithRouteWrapper.displayName = `withRouter(${displayName})`
+
   return hoistStatics(WithRouteWrapper, ComposedComponent)
 }

packages/next/package.json

@@ -95,8 +95,8 @@
     "ws": "6.1.2"
   },
   "peerDependencies": {
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0"
+    "react": "^16.3.0",
+    "react-dom": "^16.3.0"
   },
   "devDependencies": {
     "@babel/parser": "7.2.0",

packages/next/pages/_app.js

@@ -1,12 +1,10 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { execOnce, loadGetInitialProps } from 'next-server/dist/lib/utils'
-import { makePublicRouterInstance } from 'next/router'
 
 export default class App extends Component {
   static childContextTypes = {
-    headManager: PropTypes.object,
-    router: PropTypes.object
+    headManager: PropTypes.object
   }
 
   static async getInitialProps ({ Component, router, ctx }) {
@@ -17,8 +15,7 @@ export default class App extends Component {
   getChildContext () {
     const { headManager } = this.props
     return {
-      headManager,
-      router: makePublicRouterInstance(this.props.router)
+      headManager
     }
   }