React Router 4.x - PrivateRoute nie działa po podłączeniu do Redux

Question

PrivateRoute dostępny w przykładzie https://reacttraining.com/react-router/web/example/auth-workflow nie działa po połączeniu z Redux.

Moja prywatna kopia wygląda prawie tak samo jak oryginalna wersja, ale tylko jest połączona z Redux i użyła jej zamiast fakeAuth w oryginalnym przykładzie.

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); 

Wykorzystanie i wynik: -

1. nie działa ale pożądane & spodziewa pracować
   • <PrivateRoute path="/member" component={MemberPage} />
2. działa, ale nie pożądane maszyn Lik e to
   • <PrivateRoute path="/member" component={MemberPage} auth={auth} />
3. pracy. TYLKO do pracy, ale NIE pożądane w ogóle. Zrozumienie tego jest takie, że jeśli podłączysz oryginalny PrivateRoute do Redux, musisz przekazać dodatkowe rekwizyty (dowolny rekwizyt), aby PrivateRoute działał inaczej, to nie działa. Ktoś, proszę podać podpowiedź na temat tego zachowania. To jest moje główne pytanie
   • <PrivateRoute path="/member" component={MemberPage} anyprop={{a:1}} />

Answer 1

To jest znany problem w reagują-Redux i można przeczytać więcej o tym here. Problem jest następujący: connect HoC zaimplementował shouldComponentUpdate, tak że opakowany komponent nie zostanie ponownie wydany, jeśli props nie zostanie zmieniony. Ponieważ kontekst reagowania routera służy do przekazywania zmian trasy, zawinięty komponent nie jest ponownie wysyłany po zmianie tras. Wygląda jednak na to, że w wersji 5.1 programu react-redux przejdą one do wersji remove shouldComponentUpdate. Obecnie, jako obejście tego problemu, przekazuję propozycję pochodzącą z routera, taką jak this.props.match.params, do podłączonego komponentu potomnego, mimo że nie używam go wewnątrz. Ale spowoduje to ponowne wygenerowanie komponentu za każdym razem, gdy zmieni się trasa.

Answer 2

W uzupełnieniu do odpowiedzi @Tharaka można przekazać {pure: false} do connect metodę opisaną w react-redux troubleshooting section.

Answer 3

Według react-router documentation może po prostu owinąć funkcję connect z withRouter:

// before 
export default connect(mapStateToProps)(Something) 

// after 
import { withRouter } from 'react-router-dom' 
export default withRouter(connect(mapStateToProps)(Something)) 

Ten pracował dla mnie.