Remove UNSAFE_lifecycle in router context

modules/Link.js

@@ -15,7 +15,7 @@
 import React from 'react'
 import { bool, object, string, func, oneOfType } from 'prop-types'
 import invariant from 'invariant'
-import { ContextSubscriber } from './ContextUtils'
+import { Context as RouterContext } from './RouterContext'
 
 function isLeftClickEvent(event) {
   return event.button === 0
@@ -51,9 +51,9 @@ function resolveToLocation(to, router) {
  *
  *   <Link to={`/posts/${post.id}`} />
  */
-class Link extends ContextSubscriber {
+class Link extends React.Component {
   static displayName = 'Link'
-
+  static contextType = RouterContext
   static propTypes = {
     to: oneOfType([ string, object, func ]),
     activeStyle: object,

modules/RouterContext.js

@@ -17,13 +17,15 @@ import React, { Component } from 'react'
 import { array, func, object } from 'prop-types'
 
 import getRouteParams from './getRouteParams'
-import { RouterContext as ProvidableRouterContext, makeContextName } from './ContextUtils'
 import { isReactChildren } from './RouteUtils'
 
-const contextName = makeContextName('router')
-const listenersKey = `${contextName}/listeners`
-const eventIndexKey = `${contextName}/eventIndex`
-const subscribeKey = `${contextName}/subscribe`
+const createNamedContext = (name) => {
+  const context = React.createContext({})
+  context.displayName = name
+  return context
+}
+
+export const Context = createNamedContext('@@OneAppRouterContext')
 
 /**
  * A <RouterContext> renders the component tree for a given router state
@@ -45,32 +47,6 @@ class RouterContext extends Component {
     createElement: React.createElement
   }
 
-  UNSAFE_componentWillMount() {
-    this[listenersKey] = []
-    this[eventIndexKey] = 0
-  }
-
-  UNSAFE_componentWillReceiveProps() {
-    this[eventIndexKey]++
-  }
-
-  componentDidUpdate() {
-    this[listenersKey].forEach(listener =>
-      listener(this[eventIndexKey])
-    )
-  }
-
-  [subscribeKey] = (listener) => {
-    // No need to immediately call listener here.
-    this[listenersKey].push(listener)
-
-    return () => {
-      this[listenersKey] = this[listenersKey].filter(item =>
-        item !== listener
-      )
-    }
-  }
-
   createElement = (component, props) => {
     return component == null ? null : this.props.createElement(component, props)
   }
@@ -131,17 +107,11 @@ class RouterContext extends Component {
     )
 
     return (
-      <ProvidableRouterContext.Provider
-        value={{
-          router: this.props.router,
-          [contextName]: {
-            eventIndex: this[eventIndexKey],
-            subscribe: this[subscribeKey]
-          }
-        }}
+      <Context.Provider
+        value={{ router: this.props.router }}
       >
         {element}
-      </ProvidableRouterContext.Provider>
+      </Context.Provider>
     )
   }
 }

modules/__tests__/RouterContext-test.js

@@ -17,9 +17,8 @@ import React from 'react'
 import { render, unmountComponentAtNode } from 'react-dom'
 
 import match from '../match'
-import RouterContext from '../RouterContext'
+import RouterContext, { Context } from '../RouterContext'
 import { createRouterObject } from '../RouterUtils'
-import { RouterContext as ProvidableRouterContext } from '../ContextUtils'
 
 describe('RouterContext', () => {
   let node, routes, context, history, transitionManager, router
@@ -55,7 +54,7 @@ describe('RouterContext', () => {
       render() { return null }
     }
 
-    Component.contextType = ProvidableRouterContext
+    Component.contextType = Context
 
     routes = { path: '/', component: Component }
   })

modules/__tests__/transitionHooks-test.js

@@ -20,7 +20,7 @@ import execSteps from './execSteps'
 import Router from '../Router'
 import Route from '../Route'
 import match from '../match'
-import { RouterContext } from '../ContextUtils'
+import { Context as RouterContext } from '../RouterContext'
 
 describe('When a router enters a branch', function () {
   let

modules/withRouter.js

@@ -15,7 +15,7 @@
 import invariant from 'invariant'
 import React from 'react'
 import hoistStatics from 'hoist-non-react-statics'
-import { ContextSubscriber } from './ContextUtils'
+import { Context as RouterContext } from './RouterContext'
 import { routerShape } from './PropTypes'
 
 function getDisplayName(WrappedComponent) {
@@ -25,9 +25,9 @@ function getDisplayName(WrappedComponent) {
 export default function withRouter(WrappedComponent, options) {
   const withRef = options && options.withRef
 
-  class WithRouter extends ContextSubscriber {
+  class WithRouter extends React.Component {
     static displayName = 'WithRouter'
-
+    static contextType = RouterContext
     static propTypes = { router: routerShape }
 
     getWrappedInstance = () => {