javascriptreactjsreduxreact-reduxreact-router-redux

React-Router-Redux dispatched LOCATION_CHANGE twice, remove search value


I am using the next (5.0.0-alpha.6) version react-router-redux which is compatible with react-router 4.x. I try to set parameter on url while redirect to next page.

Every time it moves to the next page. I realize that it call @LOCATION_CHANGE 2 time, in the second time it removes search value. It works fine if I handle it from button event

import { requireAuth } from '../components/AuthenticatedComponent'
import createHistory from 'history/createBrowserHistory'

const history = createHistory()  

return (
    <ConnectedRouter history={history}>
      <div className="container">
        <Header />
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={requireAuth(About)} />
          <Route path="/login" component={Login} />
          <Route component={NotFound} />
        </Switch>
      </div>
    </ConnectedRouter>
  )

AuthenticatedComponent.js

import { push } from 'react-router-redux'

export function requireAuth(Component) {

class AuthenticatedComponent extends React.Component {

    componentWillMount() {
        this.checkAuth(this.props.isAuthenticated);
    }

    componentWillReceiveProps(nextProps) {
        this.checkAuth(nextProps.isAuthenticated);
    }

    checkAuth(isAuthenticated) {
        if (!isAuthenticated) {
            let redirectAfterLogin = this.props.location.pathname;
            this.props.dispatch(push({pathname: "/login", search:`?redirect=${redirectAfterLogin}`}))
        }
    }
 //....

}


Solution

  • react-router-redux is no longer maintained. For your Redux <-> Router syncing needs with React Router 4+. Let's use connected-react-router library instead will resolve this problem.