BrowserRouter vs Router with history.push()

Question

I am trying to understand the difference between BrowserRouter and Router of the react-router-dom (v5) package and what difference it makes for my example below.

The documentation says:

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

Source: https://reacttraining.com/react-router/web/api/BrowserRouter

Router The common low-level interface for all router components. Typically apps will use one of the high-level routers instead: BrowserRouter, HashRouter, MemoryRouter, NativeRouter, StaticRouter

Source: https://reacttraining.com/react-router/web/api/Router

From what I understand is that I should be using BrowserRouter for my HTML5 browser apps and I have been doing this so far.

history.push(...) example:

I am trying to perform a history.push('/myNewRoute') within a thunk:

import history as './history';  ...  export function someAsyncAction(input) {   return dispatch => {     fetch(`${API_URL}/someUrl`, {       method: 'POST',       headers: {         'Accept': 'application/json',         'Content-Type': 'application/json'       },       body: JSON.stringify({ input }),     }).then(() => {       history.push('/myNewRoute');     }).catch((err) => {       dispatch(setError(err));     })   }; }; 

history is defined as this module:

import { createBrowserHistory } from 'history';  export default createBrowserHistory(); 

and the history is also passed to my router:

import { BrowserRouter as Router } from 'react-router-dom'; import history as './history';  ...  const App = () => (   <Router history={history}>      ...   </Router> ); 

Problem: history.push() will update the URL in the browser bar but not render the component behind the route.

If I import Router instead of BrowserRouter, it works:

// Does not work: import { BrowserRouter as Router } from 'react-router-dom';  // Does work: import { Router } from 'react-router-dom'; 

Answer 1

BrowserRouter ignores the history prop as it handles the history automatically for you. If you need access to the history outside of a react component, then using Router should be fine.