Bonjour, j'essaie de faire plusieurs itinéraires avec le routeur de réaction, mais sans succès
fondamentalement, j'ai une disposition qui aura un contenu différent
et aussi un tableau de bord avec des contenus différents, mais sans succès mais je reçois l'erreur suivante
Ma navigation NAVBAR est normale dans mon "/", et ma composante domestique comme ceci: p> et quand j'essaie d'entrer mon "/ À propos de" chemin, ma navigation NAVBAR n'apparaît pas et mon DIV sur (composant: surContent)
Ni: p> essentiellement, j'ai besoin de multiples itinéraires p> où j'ai deux Navbars (l'un de la Page des connaissements et autres, et un du tableau de bord) P> de même avec le contenu p> p>
3 Réponses :
On dirait qu'il y a un couple de problèmes ici, y compris Je trouve plus facile de lire le code lors de l'enveloppe Voici un exemple complet ( supprimé une partie de l'autre code n'est pas pertinente pour le problème): P> chemin code> attributs et imbriqués
itinéraire code>.
Route code> S dans un interrupteur code> de sorte qu'il est explicite que seul l'un des composants code> itinéraire code> sera rendu. P>
const MainRoutes = () => {
return (
<GlobalContainer>
<Switch>
<Route exact path="/">
<Header/>
</Route>
<Route path="/dashboard">
<DashBoardNav/>
</Route>
</Switch>
<Content>
<Switch>
<Route exact path="/">
<HomeContent/>
</Route>
<Route path="/about">
<AboutContent/>
</Route>
</Switch>
</Content>
<Footer />
</GlobalContainer>
);
};
Mais de cette façon, mon en-tête n'apparaîtra toujours pas sur mon chemin = "/ à propos"
Vous pouvez mettre les en-têtes dans un autre commutateur code> code> ainsi de sorte que seul l'un de ceux-ci sera rendu. Est-ce que cela fonctionne?
J'ai essayé avec le commutateur et ça n'a pas très bien fonctionné, j'utilise React V 6, je pense que c'est pourquoi je n'ai rien trouvé dans la documentation
Hmm, pourrait être le path code> code>, doit être préfixé avec / code> si ce sont des chemins absolus (comme "à propos de").
@Mykonspt est-ce "/
Je suis confus par le réact de routeur V6 et je suis presque abandonné.
@MYKONSPT a fait une mise à jour de la réponse, laissez-moi savoir si cela aide ou s'il reste une certaine confusion, je peux vous aider.
@Henrywoody j'ai fini par découvrir pour rendre les itinéraires imbriqués, j'aurais besoin d'une
Depuis réagissant le routeur V4, vous ne nidez pas les itinéraires à la place, vous les gardez à l'intérieur d'un composant. ici est un exemple de base dans le même but que vous essayez d'atteindre. p>
Je suivais la documentation Github GITUB.COM/REACTRINAINING/REACT-ROUTER/BLOB/Dev/DOCS/...
<Switch> <Route exact path="/" element={<HomeContent />} /> <Route path="/about" element={<AboutContent />} /> <Route path="/dashboard" element={<DashBoardNav />} /> </Switch> This can resolve your issue. Basically switch is used to switch one or more components. so you need to pass exact component path which can refer to exact that specific component only.For more details, Request you to refer my gist link.
Les composants de commutation sont combinés dans l'instruction de commutation où ils sont réellement réfléchis.
Bonjour Merci, j'ai compris la situation, mais j'ai fini par choisir d'utiliser des itinéraires imbriqués à partir du réact de routeur V6: github.com/reactTraine/react-router/blob/dev/docs/...
Bonjour @MYKON SPT, vous devez remplacer le chemin = "/" avec le chemin = "/ à propos" Comme vous devez définir le chemin exact du composant. Laissez-moi savoir si c'est vous aide à vous.