BrowserRouter vs Router with history.push()

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.

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.

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.