Revert #6030 (#6052)

* Revert #6030

* Fix _app childContextTypes

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

@@ -1,13 +1,10 @@
 /* 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/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, { RouterContext } from '../lib/router/router'
+import Router from '../lib/router/router'
 import { loadGetInitialProps, isResSent } from '../lib/utils'
 import Head, { defaultHead } from '../lib/head'
 import Loadable from '../lib/loadable'
@@ -169,13 +169,11 @@ export async function renderToHTML (req: IncomingMessage, res: ServerResponse, p
 
     return render(renderElementToString,
       <LoadableCapture report={(moduleName) => reactLoadableModules.push(moduleName)}>
-        <RouterContext.Provider value={router}>
+        <EnhancedApp
-          <EnhancedApp
+          Component={EnhancedComponent}
-            Component={EnhancedComponent}
+          router={router}
-            router={router}
+          {...props}
-            {...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, makePublicRouterInstance, RouterContext } from 'next/router'
+import { createRouter } 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'
@@ -181,11 +181,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((
-      <RouterContext.Provider value={makePublicRouterInstance(router)}>
+      <HeadManagerContext.Provider value={headManager}>
-        <HeadManagerContext.Provider value={headManager}>
+        <App {...appProps} />
-          <App {...appProps} />
+      </HeadManagerContext.Provider>
-        </HeadManagerContext.Provider>
-      </RouterContext.Provider>
     ), appContainer)
   } else {
     // In production we catch runtime errors using componentDidCatch which will trigger renderError.
@@ -198,11 +196,9 @@ async function doRender ({ App, Component, props, err, emitter: emitterProp = em
     }
     renderReactElement((
       <ErrorBoundary onError={onError}>
-        <RouterContext.Provider value={makePublicRouterInstance(router)}>
+        <HeadManagerContext.Provider value={headManager}>
-          <HeadManagerContext.Provider value={headManager}>
+          <App {...appProps} />
-            <App {...appProps} />
+        </HeadManagerContext.Provider>
-          </HeadManagerContext.Provider>
-        </RouterContext.Provider>
       </ErrorBoundary>
     ), appContainer)
   }

packages/next/client/router.js

@@ -75,9 +75,6 @@ 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 from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 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)
 
-  function WithRouteWrapper (props) {
+  class WithRouteWrapper extends Component {
-    return (
+    static contextTypes = {
-      <RouterContext.Consumer>
+      router: PropTypes.object
-        {router => (
+    }
-          <ComposedComponent
-            router={router}
-            {...props}
-          />
-        )}
-      </RouterContext.Consumer>
-    )
-  }
 
-  WithRouteWrapper.displayName = `withRouter(${displayName})`
+    static displayName = `withRouter(${displayName})`
+
+    render () {
+      return <ComposedComponent
+        router={this.context.router}
+        {...this.props}
+      />
+    }
+  }
 
   return hoistStatics(WithRouteWrapper, ComposedComponent)
 }

packages/next/pages/_app.js

@@ -1,12 +1,24 @@
 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 = {
+    router: PropTypes.object
+  }
+
   static async getInitialProps ({ Component, router, ctx }) {
     const pageProps = await loadGetInitialProps(Component, ctx)
     return {pageProps}
   }
 
+  getChildContext () {
+    return {
+      router: makePublicRouterInstance(this.props.router)
+    }
+  }
+
   // Kept here for backwards compatibility.
   // When someone ended App they could call `super.componentDidCatch`. This is now deprecated.
   componentDidCatch (err) {