Comment rediriger avec le message flash react-router 4

Question

Voici ce que j'essaie de réaliser: Lorsqu'un utilisateur essaie d'accéder à une page protégée sur mon site ReactJS, je veux les rediriger vers la page d'accueil avec un message flash disant "Veuillez vous connecter" ou quelque chose de similaire. Comment puis-je y parvenir avec reac-router v4. Voici ce que j'ai jusqu'à présent:

<Router> 
<div> 
    <Switch> 
    <Route path="/" component={Home} /> 
    <Route 
     exact path="/source" render={() => (
     isAuthenticated() ? (
      <Source /> 
     ) : (
      <Home /> //I want to Redirect to the Home Page with a flash message if user is not logged in 
     ) 
    )} 
    /> 
    <Route path="/contact" component={ContactUs} /> 
    </Switch> 
</div> 
</Router>, 
); 

Answer 1

Voici ce qui a fonctionné pour moi: J'ai utilisé la méthode de redirection qui est fournie avec react-router v4. Cela vous permet d'y parvenir facilement.

<Route 
     exact path="/source" render={() => (
     isAuthenticated() ? (
      <Source /> 
     ) : (
      <Redirect 
      to={{ 
       pathname: '/', 
       state: 'Please sign in' 
      }} 
      /> 
     ) 
    )} 
    /> 

Vous pouvez en savoir plus sur Redirect ici: React Router v4 - Redirect

Answer 2

Que diriez-vous l'envoi d'un connecté propriété du composant <Home> puis le composant à la maison peut regarder cette propriété et rendre le message flash si nécessaire:

exact path="/source" render={() => (
    isAuthenticated() ? (
     <Source /> 
    ) : (
     <Home loggedIn={isAuthenticated} /> 
    ) 
)}