0
votes

Réagir dans les itinéraires multiples du routeur

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 xxx

mais je reçois l'erreur suivante Ma navigation NAVBAR est normale dans mon "/", et ma composante domestique comme ceci:

 Entrez la description de l'image ici

et quand j'essaie d'entrer mon "/ À propos de" chemin, ma navigation NAVBAR n'apparaît pas et mon DIV sur (composant: surContent) Ni:

 Entrez la description de l'image ici

essentiellement, j'ai besoin de multiples itinéraires

où j'ai deux Navbars (l'un de la Page des connaissements et autres, et un du tableau de bord)

de même avec le contenu


1 commentaires

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.


3 Réponses :


0
votes

On dirait qu'il y a un couple de problèmes ici, y compris chemin code> attributs et imbriqués itinéraire code>.

Je trouve plus facile de lire le code lors de l'enveloppe 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>

Voici un exemple complet ( supprimé une partie de l'autre code n'est pas pertinente pour le problème): 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>
  );
};


8 commentaires

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 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 , doit être préfixé avec / si ce sont des chemins absolus (comme "à propos de").


@Mykonspt est-ce "/ à propos"?


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 dans le composant (home) mais je n'étais pas sûr de faire cette structure que je ne sais pas si ce serait un code laid



0
votes

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.


1 commentaires

0
votes
<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.

2 commentaires

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/...