J'ai du mal avec ce que je suis sûr est les bases de React Router. J'ai un fichier App.js global et un composant fonctionnel de réaction enfant, Navbar.js. Je veux que mon Switch soit dans App.js, mais Navbar.js pour avoir des liens vers mes différentes pages.

Les questions que j'ai examinées précédemment concernant l'imbrication parlaient de routes imbriquées, mais je ne pense pas que ce soit mon cas ici. Dois-je déclarer une nouvelle route dans le composant Navbar? Je ne comprends pas très bien pourquoi je ne peux pas simplement avoir le composant de lien seul dans Navbar, ou simplement pousser la page que je veux dans l'historique.

2
BigSteve 28 avril 2020 à 20:09

2 réponses

Meilleure réponse

D'accord, il vous suffit donc d'importer ce que nous appelons un lien de react-router-dom.
Et puis vous pouvez utiliser Link comme balise "d'ancrage"

import {Link} from 'react-router-dom'
 <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/users">Users</Link>
        </li>
      </ul>
    </nav>
2
hrushikesh kuklare 28 avril 2020 à 17:17

Dans App.js, vous pouvez avoir le switch

<BrowserRouter>
    <Switch>
        <Route path="/" component={Home}/>
        <Route path="/contact-us" component={ContactUs}/>
        ....
    </Switch>
</BrowserRouter>

Et dans Navbar.js, vous pouvez avoir la navigation

<div>
    <Link to="/">Home</Link>
    <Link to="/contact-us">Contact us</Link>
    .....
</div>
1
Shmili Breuer 29 avril 2020 à 01:14