J'ai une application React avec la structure simplifiée suivante:
function App(props) {
return (
<Navbar />
<Router>
<Route exact path="/profile/" component={Profile} />
<Route exact path="/" component={Home} />
</Router>
);
}
Dans le composant Navbar , j'ai un bouton pour déconnexion , ce qui signifie que Je dois:
J'ai essayé d'utiliser onClick de ce bouton et d'utiliser this.props.history.push ('/') pour changer le chemin, mais ceci ne fonctionne pas (il se plaint que l'historique est indéfini ), car ma barre de navigation est définie en dehors du routeur.
Ma question est, est-ce que ça va déplacer Navbar à l'intérieur des composants de mon routeur et le répéter pendant qu'il est le même dans toutes les pages? Ou y a-t-il une solution anti-duplication que je peux utiliser pour modifier le chemin de mon navigateur?
3 Réponses :
Les routes écoutent l'API d'historique fournie par le contexte du routeur et comme Navbar est rendue en dehors de celle-ci, elles ne reflètent pas le changement.
La solution consiste à enrouler le routeur autour de la barre de navigation et à rendre NAvbar comme route par défaut
function App(props) {
return (
<Router>
<>
<Route component={Navbar}/>
<Route exact path="/profile/" component={Profile} />
<Route exact path="/" component={Home} />
</>
</Router>
);
}
Je ne sais pas pourquoi quelqu'un a décliné votre réponse (je serais heureux si je sais ce qui ne va pas ici), mais j'ai fini avec une solution similaire pour passer les accessoires Route à ma Navbar pour avoir un accès historique :
@AliTou, le rendu de la barre de navigation en tant qu'itinéraire est requis pour que les accessoires du routeur soient disponibles
Ouais, c'est ce que les autres réponses n'ont pas envisagé.
Vous pouvez insérer
<Router>
<div className="app-container">
<Navigation />
<div className="content">
<Switch>
(Routes go here)
</Switch>
</div>
</div>
</Router>
Comment puis-je accéder à l'historique dans Navigation maintenant? Je ne suis pas défini pour moi. (Dois-je transmettre des accessoires à Navigation ?
Utilisez le hook useHistory .
Si Navbar n'est pas un composant de fonction, que puis-je faire?
Vous pouvez utiliser la fonction withRouter () , puis l'utiliser avec this.props.history . Plus d'informations ici: reacttraining.com/react-router/web/api/withRouter
Oui!
Essayez d'utiliser dans votre Navbar
export default function App() {
return (
<Router>
<Navbar />
// inside Navbar try using <Link to="/">Logout</Link>
{/* A <Switch> looks through its children <Route>s and
renders the first one that matches the current URL. */}
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/users">
<Users />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</Router>
);
}
https://reacttraining.com/react-router/web/guides/quick-start
p>
Puis-je accéder à l'objet historique dans Navbar maintenant? Étant donné que je ne souhaite pas utiliser Link pour simplement rediriger vers la maison, je souhaite également effacer mon authentification dans le stockage.
Puisque vous utilisez un composant de fonction, vous pouvez essayer const {history} = useHistory (); alors vous pouvez accéder à l'historique sans aucun problème. Essaie.
@WesleyLoh Merci. Dans ce cas, ai-je déjà eu besoin d'inclure Navbar dans Router ?
Je pense que c'est bien de le mettre à l'intérieur du routeur, je ne pense pas que Navbar le rendra si l'itinéraire change.
Merci, votre mention sur le fait que Navbar ne soit pas rendu lors du changement d'itinéraire a beaucoup aidé.