Reputation: 14272
PrivateRoute available in Example https://reacttraining.com/react-router/web/example/auth-workflow is not working after connecting with Redux.
My PrivateRoute look almost same to the original version but only connected to Redux and used it instead of fakeAuth in the original example.
const PrivateRoute = ({ component: Component, auth, ...rest }) => (
<Route
{...rest}
render={props =>
auth.isAuthenticated
? <Component {...props} />
: <Redirect to={{ pathname: "/login" }} />}
/>
);
PrivateRoute.propTypes = {
auth: PropTypes.object.isRequired,
component: PropTypes.func.isRequired
}
const mapStateToProps = (state, ownProps) => {
return {
auth: state.auth
}
};
export default connect(mapStateToProps)(PrivateRoute);
Usage and result:-
<PrivateRoute path="/member" component={MemberPage} />
<PrivateRoute path="/member" component={MemberPage} auth={auth} />
<PrivateRoute path="/member" component={MemberPage} anyprop={{a:1}} />
Upvotes: 13
Views: 7396
Reputation: 36169
Complementary to @Tharaka answer you can pass {pure: false}
to connect
method as described in react-redux troubleshooting section.
React-redux makes shallow comparison of props in shouldComponentUpdate
hook to avoid unnecessary re-renders. If context props changed (react-router) it doesn’t check for that and it assumes nothing has changed.
{ pure:false }
simply disables this shallow comparison.
Upvotes: 12
Reputation: 2773
According to react-router documentation you may just wrap your connect
function with withRouter
:
// before
export default connect(mapStateToProps)(Something)
// after
import { withRouter } from 'react-router-dom'
export default withRouter(connect(mapStateToProps)(Something))
This worked for me.
Upvotes: 9
Reputation: 8055
This is known issue in react-redux and you can read more about this here. The problem is connect
HoC have implemented shouldComponentUpdate
, so that wrapped component doesn't rerender if props
aren't changed. Since react-router use context to pass route changes, the wrapped component doesn't rerender when routes change. But it seems they are going to remove shouldComponentUpdate
in 5.1 version of react-redux. Currently, as a workaround, I pass a prop coming from Router like this.props.match.params
to connected child component even though I don't use it in inside. But it will make rerendering the component each time when routes change.
Upvotes: 7