5

PrivateRoute dostępny w przykładzie https://reacttraining.com/react-router/web/example/auth-workflow nie działa po połączeniu z Redux.React Router 4.x - PrivateRoute nie działa po podłączeniu do 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}} />

Odpowiedz

5

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.

+0

Dzięki @Tharaka dla twojej informacji. –

+0

Czy możesz napisać mi działający przykład użycia PrivateRoute lub zmiany muszą być wykonane na PrivateRoute się –

+0

Nie mogę wymyślić żadnego sposobu, aby PrivateRoute działało zgodnie z oczekiwaniami w twoim 1 użyciu. Moja sugestia jest taka, że ​​wystarczy użyć 3, jeśli działa, dopóki nie naprawią tego problemu. Lub możesz przekazać 'params' do PrivateRoute w ten sposób. '<Ścieżka PrivateRoute ="/member "component = {MemberPage} params = {this.props.match.params} />' –

7

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

+0

Dzięki temu spróbuję. –

+1

Wierzę, że to odpowiedź na pytanie najlepiej odpowiada oczekiwanym wynikom. Pracował dla mnie – flybear

1

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.

+0

pracował pięknie, dziękuję! – evvels1