React Router: Nested error 404

index.js

// Error404Context.js
export default {Provider, Consumer} = React.createContext()

// Error404Provider.js
class Error404Provider extends React.Component {
  state = {
    isError: false
  }

  render() {
    return <Provider value={{
      isError: this.state.isError,
      onErrorToggle: this.handleErrorToggle
    }}>
      {this.state.isError
        ? <p>Oops ERROR <button onclick={this.handleErrorToggle}>GO BACK</button></p>
        // The routes
        : this.props.children}
    </Provider>
  }

  handleErrorToggle = () => {
    this.setState({
      isError: !this.state.isError
    })
  }
}
// Error404Route.js
class Error404Route extends React.Component {
  componentDidMount() {
    this.props.onErrorToggle()
  }

  render() {
    return null
  }
}

const WrappedError404Route = () => {
  return (
    <Consumer>
      {({isError, onErrorToggle}) => <Error404Route isError={isError} onErrorToggle={onErrorToggle} />}
    </Consumer>
  )
}

export default WrappedError404Route

// routes
<Router>
  <Error404Provider>
    <Route>
      <Switch>
        <Route component={WrappedError404Route} />
      </Switch>
    </Route>
  </Error404Provider>
</Router>