Réagir routeur privé routes / redirection ne fonctionne pas

Vous avez besoin d'envelopper votre Route avec <Switch> tag

ReactDOM.render(
<Provider store={store}>
    <App>
        <Router>
            <div>
                <Switch>
                   <PrivateRoute exact path="/"><Home /></PrivateRoute>
                   //... other private routes
                   <Route path="/login" component={Login} />
                </Switch>
            </div>
        </Router>
    </App>
</Provider>,
document.getElementById('root'));

Juste eu le même problème, je l'ai résolu en faisant mon Application redux conteneur et en passant isAuthenticated comme un accessoire de PrivateRoute

Elle est ici, j'espère que cela aide

const App = (props) => {
return (
  <Provider store={store}>
    <Router>
      <div>
        <PrivateRoute path="/secured" component={Secured} isAuthenticated={props.isAuthenticated} />
      </div>
    </Router>
  </Provider>
  );
};

const mapStateToProps = state => ({
  isAuthenticated: state.isAuthenticated
});

export default connect(mapStateToProps)(App);

Ensuite dans mon PrivateRoute

const PrivateRoute = ({ component: Component, isAuthenticated, ...rest}) => (
<Route
  {...rest}
  render={props => (
    isAuthenticated
    ? (
       <Component {...props} />
    )
    : (<Redirect to={{ pathname: '/login', state: { from: props.location} }} />)
  )}
/>
);

export default PrivateRoute;

Bien, je pense que la réponse à cette question devrait vraiment être plus détaillées, de sorte que je suis ici, après 4 heures de creuser.

Lorsque vous enroulez votre composant avec connect(), Réagir Redux implémente shouldComponentUpdate (sCU si vous cherchez des réponses sur github questions) et de faire peu profonde comparaison sur les accessoires (il va en parcourant chaque clé dans les accessoires de l'objet et de vérifier si les valeurs sont identiques '==='). Ce que cela signifie dans la pratique, c'est que votre composant est considéré comme Pur. Il va maintenant changer seulement quand ses accessoires et ses changements, et seulement ensuite! C'est le message clé ici.
Deuxième message clé, de Réagir routeur fonctionne avec le contexte de passer à l'emplacement, match, et l'histoire des objets à partir d'un Routeur pour l'Itinéraire composant. Il n'a pas utiliser des accessoires.

Maintenant, nous allons voir dans la pratique ce qu'il se passe, parce que même en sachant que, je le trouve toujours assez délicat:

• Cas 1:

Il y a 3 clés pour votre accessoires après la connexion: chemin d'accès, d'un composant, et auth (donné par la connexion). Donc, en fait, votre enveloppé composant ne sera PAS ré-rendu à tous les changements de route car il n'a pas de soins. Lorsque les modifications d'itinéraire, vos accessoires ne changent pas et il ne sera pas mise à jour.

• Cas 3:

Il y a maintenant 4 clés pour votre accessoires après la connexion: chemin d'accès, le composant auth et anyprop. L'astuce ici est que anyprop est un objet qui est créé chaque fois que le composant est appelée. Donc à chaque fois que votre composant est appelé cette comparaison est faite: {a:1} === {a:1}, ce qui (vous pouvez essayer de) vous donne de faux, de sorte que votre composant maintenant les mises à jour à chaque fois. Notez toutefois que votre composant ne se soucient pas de la route, ses enfants.

• Cas 2:

Maintenant c'est le mystère ici, parce que je suppose que vous appelez cette ligne dans votre Application fichier, et il devrait y avoir aucune référence à la "auth" là-bas, et vous devriez avoir un message d'erreur (du moins c'est ce que je suis guetting). Ma conjecture est que "auth" dans votre Application fichier fait référence à un objet qui y sont définies.

Maintenant, que devons-nous faire ?

Je vois deux options ici:

1. Dire Réagir Redux que votre composant n'est pas pur, cela permettra d'éliminer l'unité d'injection et de votre composant va maintenant mettre à jour correctement.

   connect(mapStateToProps, null, null, {
   pure: faux
   })(PrivateRoute)

2. Utilisation WithRouter(), qui permettra d'injecter de l'emplacement, la correspondance et l'histoire de l'objet à vos composants comme les accessoires. Maintenant, je ne connais pas le fonctionnement interne, mais je soupçonne Réagir routeur n'est pas muter ces objets de sorte que chaque fois que le changement d'itinéraire, ses accessoires et ses changements (sCU renvoie true (vrai) et ainsi votre composant correctement mises à jour. L'effet secondaire de ceci est que votre Réagissent arbre est maintenant polluée avec beaucoup de WithRouter et de la Route des trucs...

Référence à la github question: Traiter avec la mise à Jour de Blocage

Vous pouvez voir ici que withRouter est conçu comme un quickfix, mais pas une solution recommandée. utilisation pure:faux est pas mentionné donc je ne sais pas comment bon ce correctif pourrait être.

J'ai trouvé une 3ème solution, si c'est pas clair pour moi si c'est vraiment une meilleure solution que withRouter, avec des Composante de l'Ordre. Vous vous connectez à votre Supérieur-Composante de l'ordre de la Redux magasin, et maintenant votre route ne donne pas une merde au sujet de ce qu'il rend, le HOC traite avec elle.

import Notlogged from "./Notlogged";    
function Isloggedhoc({ wrap: Component, islogged, ...props }) {
      return islogged ? <Component {...props} /> : <Notlogged {...props} />;
    }

const mapState = (state, ownprops) => ({
      islogged: state.logged,
      ...ownprops
    });

export default connect(mapState)(Isloggedhoc);

dans votre App.js

<Route path="/PrivateRoute" render={props => <Isloadedhoc wrap={Mycomponent} />} />

Vous pourriez même faire un curry de fonction pour la raccourcir un peu:

function isLogged(component) {
  return function(props) {
    return <Isloadedhoc wrap={component} {...props} />;
  };
}

De l'utiliser comme ça:

<Route path="/PrivateRoute" render={isLogged(Mycomponent)} />

Selon réaction-la documentation du routeur vous pouvez juste envelopper de votre connect fonction avec withRouter:

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

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

Cela a fonctionné pour moi et mon point de vue a commencé à être mis à jour avec des routes dans ce cas.