Comment utiliser les liens d'ancrage normaux avec react-router
très similaire à cette question angulaire : comment utiliser les liens d'ancrage pour la navigation en page lorsque j'utilise react-router?
en d'autres termes, comment puis-je implémenter le HTML simple suivant en utilisant react-router?
<a href="#faq-1">Question 1</a>
<a href="#faq-2">Question 2</a>
<a href="#faq-3">Question 3</a>
<h3 id="faq-1">Question 1</h3>
<h3 id="faq-2">Question 2</h3>
<h3 id="fa1-3">Question 3</h3>
actuellement, j'intercepte les clics sur ces liens, et défile jusqu'à la position d'ancrage. Cela n'est pas satisfaisant, car cela signifie qu'il est impossible de lier directement à une section d'une page.
2 réponses
le problème avec les liens ancre est que le défaut de react-router est d'utiliser le hachage dans L'URL pour maintenir l'état. Heureusement, vous pouvez changer le comportement par défaut pour autre chose, comme dans la "Location documentation . Dans votre cas, vous voudrez probablement essayer "clean URLs" en utilisant L'objet HistoryLocation, ce qui signifie que react-router n'utilisera pas le hachage D'URL. Essayez comme ceci:
Router.run(routes, Router.HistoryLocation, function (Handler) {
React.render(<Handler/>, document.body);
});
Réagir Routeur de Hachage Lien a fonctionné pour moi. Facile à installer et à mettre en œuvre:
$ npm install --save react-router-hash-link
dans votre composant.js importer en tant que Lien:
import { HashLink as Link } from 'react-router-hash-link';
et au lieu d'utiliser une ancre <a> , utilisez <Link> :
<Link to="#faq-1>Question 1</Link>
<Link to="#faq-2>Question 2</Link>
<Link to="#faq-3>Question 3</Link>
NOTE: j'ai utilisé HashRouter au lieu de Router