Je crée un nouveau projet JS et je souhaite rediriger les peuples sur Authpage lorsque les peuples ne sont pas connectés.
J'ai un conteneur d'applications comme celui-ci: P>
const PrivateRoute = (props) => {
const { component: Component, isLogged, ...rest } = props;
console.log('on est dans la route lol', isLogged, {...rest});
return (
<Route
{...rest}
render={propsRender =>
isLogged ? (
<Component {...propsRender} />
) : (
<Redirect
to={{
pathname: "/login",
state: { from: propsRender.location }
}}
/>
)
}
/>
);
};
PrivateRoute.propTypes = {
isLogged: PropTypes.bool,
};
export default PrivateRoute;
3 Réponses :
Le problème est que vous devez renvoyer le composant rediriger et ne pas le rendre. Donc, vous devez faire quelque chose comme l'exemple ci-dessous
Si l'URL de la barre d'adresse change de / connexion, le routeur de réacteur fonctionne comme prévu. Il y a peut-être quelque chose de mal avec votre composant de connexion. Essayez de remplacer le composant de connexion avec quelque chose de simple comme ci-dessous, puis testez:
function Login() {
return <h3>Test login page</h3>;
}
(Désolé, je ne peux pas commenter votre message car je n'ai pas assez de points de réputation ici, il semble que je ne peux que commenter mes propres réponses) selon ce que vous avez posté à Stackoverflow.com/a/54182431/4979359 Il semble que votre composant de connexion a un bogue, réagirait la gestion de l'État pourrait être un peu délicate. Pouvez-vous publier le code de votre composant de connexion?
ho, désolé je ne montre pas ces informations dans mes écrans, mais la barre d'adresse URL change de la barre / connexion, j'ai renvoyé cette fonction, mais j'ai le même problème.
Cela ne fonctionne pas la première fois, mais si je recharge la page sur URL / Connexion, cela fonctionne et j'ai "la page de connexion du test" à l'écran.
I Testez le composant privatère de Privateroute lorsque islogged === True et Thats fonctionne Je ne comprends pas pourquoi mon composant de connexion n'est pas affiché.