BrowserRouter vs Router with history.push() : <p>I am trying to understand the difference between <code>BrowserRouter</code> and <code>Router</code> of the <code>react-router-dom</code> (v5) package and what difference it makes for my example below.</p>

<p>The documentation says:</p>

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

<p>Source: <a href="https://reacttraining.com/react-router/web/api/BrowserRouter" rel="noreferrer">https://reacttraining.com/react-router/web/api/BrowserRouter</a></p>

<blockquote>
  <p><strong>Router</strong>
  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</p>
</blockquote>

<p>Source: <a href="https://reacttraining.com/react-router/web/api/Router" rel="noreferrer">https://reacttraining.com/react-router/web/api/Router</a></p>

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

<p><strong>history.push(...) example:</strong></p>

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

<pre class="lang-js prettyprint-override"><code>import history as './history';

...

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

<p><code>history</code> is defined as this module:</p>

<pre class="lang-js prettyprint-override"><code>import { createBrowserHistory } from 'history';

export default createBrowserHistory();
</code></pre>

<p>and the <code>history</code> is also passed to my router:</p>

<pre class="lang-js prettyprint-override"><code>import { BrowserRouter as Router } from 'react-router-dom';
import history as './history';

...

const App = () =&gt; (
  &lt;Router history={history}&gt;
     ...
  &lt;/Router&gt;
);
</code></pre>

<p><strong>Problem:</strong> <code>history.push()</code> will update the URL in the browser bar but not render the component behind the route.</p>

<p>If I import <code>Router</code> instead of <code>BrowserRouter</code>, it works:</p>

<pre class="lang-js prettyprint-override"><code>// Does not work:
import { BrowserRouter as Router } from 'react-router-dom';

// Does work:
import { Router } from 'react-router-dom';
</code></pre>
