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