title: BrowserRouter vs Router with history.push()
body: <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>