title: history push does not match Route. Only changes the URL and defaults to catch all route instead
body: <p>I have React Router v5 with below code:</p>
  <p>index.js</p>
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import App from './App';
  import * as serviceWorker from './serviceWorker';
  import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
  
  const muiTheme = createMuiTheme({
    palette: {
      primary: {
          main: '#2196f3'
      }
    },
    overrides: {
      MUIDataTableSelectCell: {
        fixedHeaderCommon: {
          backgroundColor: 'transparent',
        },
      },
      MuiTableCell: {
        sizeSmall: {
          padding: '6px 0 6px 16px'
        }
      },
      MuiTableRow: {
        hover: {
          cursor: 'pointer'
        }
      }
    }
  });
  
  ReactDOM.render(&lt;MuiThemeProvider theme={muiTheme}&gt;&lt;App /&gt;&lt;/MuiThemeProvider&gt;, document.getElementById('root'));
  
  serviceWorker.unregister();
  </code></pre>
  <p>App.js</p>
  <pre><code>import {
    // BrowserRouter as Router,
    Switch,
    Route,
    Router,
    // Link,
    // useRouteMatch,
    // useParams
  } from &quot;react-router-dom&quot;;
  import history from 'history/browser';
  import Dashboard from './common/components/Dashboard';
  import Login from './common/components/Login';
  import Test from './common/components/Test';
  
  
  &lt;Router history={history}&gt;
    &lt;Switch&gt;
      &lt;Route path=&quot;/test&quot; component={Test} /&gt;
      &lt;Route path=&quot;/login&quot; component={Login} /&gt;
      &lt;Route path=&quot;/&quot; exact component={Dashboard} /&gt;
      &lt;Route component={Error404} /&gt;
    &lt;/Switch&gt;
  &lt;/Router&gt;
  </code></pre>
  <p>Login.js</p>
  <pre><code>import { useHistory } from &quot;react-router-dom&quot;;
  
  export default function Login() {
    let history = useHistory();
    const classes = useStyles();
    const storedToken = localStorage.getItem('token');
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [remember, setRemember] = useState(false);
    const [fetchError, setFetchError] = useState(null);
  
    async function login(e) {
      e.preventDefault();
      try {
        const data = await ApiClient.post(`/api/auth`, { email: email, password: password, remember: remember });
        localStorage.setItem('token', data.token);
        setFetchError(null);
        history.push('/test');
      } catch (err) {
        if(err.response.status === 401) {
          setFetchError('Unauthorized access, please login again.');
        }
      }
    }
  
    return (
      &lt;Container component=&quot;main&quot; maxWidth=&quot;xs&quot;&gt;
        &lt;CssBaseline /&gt;
        &lt;div className={classes.paper}&gt;
          &lt;Avatar className={classes.avatar}&gt;
            &lt;LockOutlinedIcon /&gt;
          &lt;/Avatar&gt;
          &lt;Typography component=&quot;h1&quot; variant=&quot;h5&quot;&gt;
            Login
          &lt;/Typography&gt;
          &lt;form className={classes.form} noValidate onSubmit={login}&gt;
            &lt;TextField
              variant=&quot;outlined&quot;
              margin=&quot;normal&quot;
              required
              fullWidth
              id=&quot;email&quot;
              label=&quot;Email Address&quot;
              name=&quot;email&quot;
              autoComplete=&quot;email&quot;
              autoFocus
              onChange={(e) =&gt; setEmail(e.target.value)}
              value={email}
            /&gt;
            &lt;TextField
              variant=&quot;outlined&quot;
              margin=&quot;normal&quot;
              required
              fullWidth
              name=&quot;password&quot;
              label=&quot;Password&quot;
              type=&quot;password&quot;
              id=&quot;password&quot;
              autoComplete=&quot;current-password&quot;
              onChange={(e) =&gt; setPassword(e.target.value)}
              value={password}
            /&gt;
            &lt;FormControlLabel
              control={&lt;Checkbox value=&quot;remember&quot; color=&quot;primary&quot; /&gt;}
              label=&quot;Remember me&quot;
              onChange={(e) =&gt; setRemember(e.target.value)}
              value={remember}
            /&gt;
            &lt;Button
              type=&quot;submit&quot;
              fullWidth
              variant=&quot;contained&quot;
              color=&quot;primary&quot;
              className={classes.submit}
            &gt;
              Sign In
            &lt;/Button&gt;
            &lt;Grid container&gt;
              &lt;Grid item xs&gt;
                &lt;Link href=&quot;#&quot; variant=&quot;body2&quot;&gt;
                  Forgot password?
                &lt;/Link&gt;
              &lt;/Grid&gt;
              &lt;Grid item&gt;
                &lt;Link href=&quot;#&quot; variant=&quot;body2&quot;&gt;
                  {&quot;Don't have an account? Sign Up&quot;}
                &lt;/Link&gt;
              &lt;/Grid&gt;
            &lt;/Grid&gt;
          &lt;/form&gt;
        &lt;/div&gt;
        &lt;Box mt={8}&gt;
          &lt;Copyright /&gt;
        &lt;/Box&gt;
      &lt;/Container&gt;
    );
  
  }
  </code></pre>
  <p>Whenever I submit with correct credentials I get 200 response code from the server with JWT token but after <code>history.push('/test');</code> on login function, I don't get the Route match with <code>/test</code> instead it goes to <code>Error404</code> catch all route.</p>
  <p>How is this possible?</p>