1
votes

routage nav.link de react-bootstrap

Je travaille sur un projet. J'ai navbar et nav.links dessus. comme la maison, le prix et les caractéristiques.

Je souhaite afficher le routage des pages lorsque je clique dessus. Voici mes codes à ce sujet. J'ai fait le style de routage habituel mais cela ne fonctionne pas.

<Route path ="/price" exact component={Price}></Route>

et mes définitions de routage dans app.js;

<LinkContainer>
     <Nav.Link to="/price" >Price</Nav.Link>
</LinkContainer>

Je crée et importe price.js et je les importe également.

Je peux utiliser avec succès le routage sur mes boutons mais nav.links ne fonctionne pas. Une idée?

* Btw c'était à l'origine comme ça Price En fait, à quoi sert href? Alors, je l'ai effacé et ai ajouté "à"

reactjs react-router react-bootstrap

0 commentaires

5 Réponses :

0
votes

Dans react-bootstrap , vous devez définir comme ceci

<NavLink to="/price" >Price</NavLink>

au lieu de

<Link to="/price" >Price</Link>

Et en utilisant react-router-dom

 <LinkContainer>
     <Nav.Link to="/price" >Price</Nav.Link>
</LinkContainer>

<LinkContainer>
     <Nav.Link href="/price" >Price</Nav.Link>
</LinkContainer>

p >

1 commentaires

Thx, veuillez trouver ma propre réponse. Y a-t-il une différence entre les vôtres? Ou ce sont simplement les mêmes choses avec une notation différente?

1
votes

J'ai trouvé que mon erreur devrait être;

<LinkContainer to="/price">
     <Nav.Link >Price</Nav.Link>
</LinkContainer>

Je laisse cette question ici pour si quelqu'un a un problème comme celui-ci.

En fait, j'ai besoin d'apprendre ce que c'est href pour?

1 commentaires

href est un attribut html simple et path / to est l'attribut de l'élément react.

0
votes

Essayez d'utiliser react-router-dom au lieu de react-router final

import { BrowserRouter, Route, Link} from "react-router-dom";

0 commentaires

2
votes

Ce code fonctionne pour moi:

Accueil

0 commentaires

0
votes

Le problème est pour react-bootstrap (basé sur BS-v3) cela fonctionnait auparavant:

<Nav>
  <LinkContainer to="/routeA"><Nav.Link>My RouteA</Nav.Link></LinkContainer>
  <LinkContainer to="/routeB"><Nav.Link>My RouteB</Nav.Link></LinkContainer>
</Nav>

Mais pour react-bootstrap (basé sur BS-v4) , les développeurs l'ont changé en

<Nav>
  <LinkContainer to="/routeA"><NavItem>My RouteA</NavItem></LinkContainer>
  <LinkContainer to="/routeB"><NavItem>My RouteB</NavItem></LinkContainer>
</Nav>

* Remarque LinkContainer vient de react-router-bootstrap

[Je n'ai pas trouvé le doco officiel pour cela, et je ne sais pas comment faire une pull-request, j'ai besoin de Github pour les nuls]

0 commentaires