Export context to allow history access

Ref https://github.com/ReactTraining/react-router/issues/6362#issuecomment-425841471

Since “always render” behaviour will be removed from <Route children /> it would be good to provide a way to access context values from any part of app.

Here’s a few ways and all requires to provide RouterContext.

RouterContext.Consumer

const Component = () => (
  <RouterContext.Consumer>
    {context => (
      <button onClick={() => {
        if (context) {
          context.history.push('/users')
        }
      }}>Open users</button>
    )}
  </RouterContext.Consumer>
)

Class component contextType

const Component = class extends React.Component {
  contextType = RouterContext;
  handler = () => {
    this.context.history.push('/users')
  }
}

context.unstable_read api

const Component = () => {
  const context = RouterContext.unstable_read();
  return (
    <button onClick={() => {
      if (context) {
        context.history.push('/users')
      }
    }}>Open users</button>
  )
}

[pshrmn]

I think the goal should be to eventually drop withRouter() and only use RouterContext.

Edit: To elaborate, I think of a context consumer (read from) as being public, while a provider (write to) is private. A <Route> is a bit unusual since it is both a consumer and a provider. A pathless <Route> (outside of a <Switch>) is only being used as a consumer, so it is just adding complexity when a user really just wants to read from the context.

Exposing the consumer will also let users use whatever future context optimizations for class components there are (Context.read(), static contextType, etc.). The current pattern of using a wrapper around classes that need access to the context in lifecycle methods is tedious at best.

[jaredpalmer]

@mjackson AFAIK exporting context is going to be normal/expected with what’s coming. Formik is going to do the same.