BrowserRouter vs Router with history.push()
ReactjsReact RouterReact Router-DomHtml5 HistoryReactjs Problem Overview
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
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';
Reactjs Solutions
Solution 1 - Reactjs
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.
Solution 2 - Reactjs
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 This is not true. I am not sure about the difference.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.
Solution 3 - Reactjs
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.