reactjs / react-router-redux

Ruthlessly simple bindings to keep react-router and redux in sync
https://www.npmjs.com/package/react-router-redux
MIT License
7.81k stars 647 forks source link

LOCATION_CHANGE dispatch twice, remove search value #601

Closed zcmgyu closed 7 years ago

zcmgyu commented 7 years ago

"react-router": "^4.2.0", "react-router-dom": "^4.2.2", "react-router-redux": "^5.0.0-alpha.6", "history": "^4.7.2"

App.js

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}`}))
            }
        }
     //....
}

Every time it moves to the login 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

https://imgur.com/gzb1oZR

timdorr commented 7 years ago

This is a bug tracker, not a support system. For usage questions, please use Stack Overflow or Reactiflux. Thanks!