Convert wrapper class to function component (#9095)

* Convert wrapper class to function component

* Remove unneeded export

* Check versions of chrome and chromedriver

* Update to chromedriver 76

* Revert config.yml

* Update with-router.tsx

packages/next/client/router.ts

@@ -13,7 +13,7 @@ type SingletonRouterBase = {
   ready(cb: () => any): void
 }
 
-export { Router, RouterContext, NextRouter }
+export { Router, NextRouter }
 
 export type SingletonRouter = SingletonRouterBase & NextRouter
 

packages/next/client/with-router.tsx

 import React from 'react'
 import { NextComponentType, NextPageContext } from '../next-server/lib/utils'
-import { NextRouter, RouterContext } from './router'
+import { NextRouter, useRouter } from './router'
 
 export type WithRouterProps = {
   router: NextRouter
@@ -16,27 +16,19 @@ export default function withRouter<
   C = NextPageContext
 >(
   ComposedComponent: NextComponentType<C, any, P>
-): React.ComponentClass<ExcludeRouterProps<P>> {
-  class WithRouteWrapper extends React.Component<ExcludeRouterProps<P>> {
-    static displayName?: string
-    static getInitialProps?: any
-    static contextType = RouterContext
-
-    context!: React.ContextType<typeof RouterContext>
-
-    render() {
-      return <ComposedComponent router={this.context} {...this.props as any} />
-    }
+): React.ComponentType<ExcludeRouterProps<P>> {
+  function WithRouterWrapper(props: any) {
+    return <ComposedComponent router={useRouter()} {...props} />
   }
 
-  WithRouteWrapper.getInitialProps = ComposedComponent.getInitialProps
+  WithRouterWrapper.getInitialProps = ComposedComponent.getInitialProps
   // This is needed to allow checking for custom getInitialProps in _app
-  ;(WithRouteWrapper as any).origGetInitialProps = (ComposedComponent as any).origGetInitialProps
+  ;(WithRouterWrapper as any).origGetInitialProps = (ComposedComponent as any).origGetInitialProps
   if (process.env.NODE_ENV !== 'production') {
     const name =
       ComposedComponent.displayName || ComposedComponent.name || 'Unknown'
-    WithRouteWrapper.displayName = `withRouter(${name})`
+    WithRouterWrapper.displayName = `withRouter(${name})`
   }
 
-  return WithRouteWrapper
+  return WithRouterWrapper
 }