Can't access BrowserHistory from React component props

Question

Here is my router definition:

export default class Routes extends Component {
  render() {
    return (
      <Switch>
        <Redirect exact from="/" to="/dashboard" />
        <Route component={Dashboard} exact path="/dashboard" />
        <Route component={Sites} exact path="/sites" />
        <Route component={RegisterSite} exact path="/register" />
      </Switch>
    )
  }
}

And the creation of the main App component:

export default class App extends Component {
  render() {
    return (
      <ThemeProvider theme={theme}>
        <Router history={browserHistory}>
          <Routes />
        </Router>
      </ThemeProvider>
    )
  }
}

After this setup I thought all the components registered with the Route component should have browserHistory injected into their props but only Dashboard component has history injected into its props. When I try to access history inside of Sites component for example, I get undefined.

Is this expected or am I doing something wrong?

ravibagul91 ravibagul91 · Accepted Answer · 2019-06-24T05:52:54

Use BrowserRouter

From the docs,

A <Router> that uses the HTML5 history API (pushState, replaceState and the popstate event) to keep your UI in sync with the URL.

Can't access BrowserHistory from React component props

1 Answers