Comment utiliser des liens d'ancrage normaux avec le routeur réactif

Très similaire à cette question angulaire : comment puis-je utiliser des liens d'ancrage pour la navigation dans la page lors de l'utilisation de réacteur-routeur?

En d'autres termes, comment puis-je mettre en œuvre le HTML simple suivant lors de l'utilisation de réactive-routeur?

<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 me déplace jusqu'à la position d'ancrage. Ceci n'est pas satisfaisant, car cela signifie qu'il est impossible de lier directement à une partie de la page.

Le problème avec les liens d'ancrage est que le défaut du routeur réactif est d'utiliser le hash dans l'URL pour maintenir l'état. Heureusement, vous pouvez échanger le comportement par défaut pour autre chose, selon la documentation de l' emplacement . Dans votre cas, vous voudrez probablement essayer "URL propres" à l'aide de l'objet HistoryLocation, ce qui signifie que le routeur réacteur n'utilisera pas le hash URL. Essayez-le comme ceci:

 Router.run(routes, Router.HistoryLocation, function (Handler) { React.render(<Handler/>, document.body); });

React Router Hash Link a fonctionné pour moi. Facile à installer et à mettre en œuvre:

 $ npm install --save react-router-hash-link

Dans votre component.js, importez-le comme 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>

REMARQUE: j'ai utilisé HashRouter au lieu du Router