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.

Answer 2

You can access history via the useHistory hook let history = useHistory(); to perform history.push() for BrowserRouter.

Looking at the HTML5 History API documentation, it seems that the history API preserves state for the user automatically. Say you are at page 1 initially and page 1 has a page outlook A. You performed some actions that changes the page 1 outlook to B. If you now moves to page 2, when you click the back button on the browser, you will be direct back to page 1. History API preseves your state so it knows to render outlook B to you, so that is the advantage of using BrowserRouter. Though I am not 100% sure, I suppose Browser doesn't come with this functionality and in which case it will render outlook A when you get directed back to page 1. This is not true. I am not sure about the difference.

Answer 3

I have the same issue.

BrowserRouter and useHistory() hook have been used for my component. And createBrowserHistory() has been used for redux-saga. But, the page has not moved by redux-saga such as your case.

Adding to that, my source has been developed using BrowserRouter, I don't want to replace it to Router component.

As my poor investigating, I found that both history objects are different. (I compared them with if and ==.) I guess it is the reason.

To solve it, I save the reference of the history object got by useHistory() to some global utility code, and use it in redux-saga code. Then, it works well.

I don't think this is the best way, but I couldn't find the best and official way yet.