"Redirect" from "react-router" doesn't work anymore because of [email protected]

[smitroshin]

Packages versions:

"history": "^5.0.0",  
"react": "^17.0.1",  
"react-dom": "^17.0.1",  
"react-redux": "^7.2.2",  
"react-router-dom": "^5.2.0",  
"react-scripts": "4.0.0",  
"redux": "^4.0.5", 
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0",  

Issue description:

Redirect doesn't work. URL is changing but component did not mounting.

Last workable version of history:

"history": "^4.10.1",

src/utils/history.js

import { createBrowserHistory } from 'history';

export default createBrowserHistory();

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Router } from 'react-router-dom';
import { Provider } from 'react-redux';
import history from './utils/history';
import store from './store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <App />
    </Router>
  </Provider>,
  document.getElementById('root'),
);

src/App.js

import { Switch, Route, Redirect } from 'react-router-dom';  
import HomePage from './containers/HomePage';  
import LoginPage from './containers/LoginPage';  
import store from './store';  
  
const App = () => (
  <div className="App">
    <Switch>
      <Route
        path="/"
        exact
        component={(route) =>
          store.getState().user.isAuthorized ? (
            <HomePage {...route} />
          ) : (
            <Redirect to="/login" />
          )
        }
      />
      <Route path="/login" exact component={LoginPage} />
    </Switch>
  </div>
);
  
export default App;

[StringEpsilon]

Most likely due to the change of history.listen() - but v5 has a lot of breaking changes that will make react-router stop working. See #811 for all breaking changes. You'll have to downgrade to history 4.10, I'm afraid.