web-dev-qa-db-fra.com

Comment utiliser les liens d'ancrage normaux avec react-router

Très similaire à this angular : comment utiliser les liens d'ancrage pour la navigation sur la page lors de l'utilisation de react-router?

En d'autres termes, comment puis-je implémenter le code HTML simple suivant lors de l'utilisation de 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 je défile jusqu'à la position d'ancrage. Ce n'est pas satisfaisant, car cela signifie qu'il est impossible de créer un lien direct vers une section d'une page.

javascriptanchorreactjsreact-router
33
starwed

Le problème avec les liens d'ancrage est que la valeur par 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, conformément à la Documentation d'emplacement . Dans votre cas, vous voudrez probablement essayer des "URL propres" en utilisant l'objet HistoryLocation, ce qui signifie que react-router n'utilisera pas le hachage d'URL. Essayez-le comme ceci:

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

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 en tant que lien:

import { HashLink as Link } from 'react-router-hash-link';

Et au lieu d'utiliser une ancre <a>, utilisation <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 de Router

8
maledr53