javascript - parameter - Cómo usar enlaces de anclaje normales con react-router

react router get param

Question

Muy similar a esta pregunta angular : ¿cómo uso los enlaces de anclaje para la navegación en la página cuando uso react-router?

En otras palabras, ¿cómo implemento el siguiente HTML simple cuando uso 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>

Actualmente intercepto los clics en dichos enlaces y me desplazo a la posición de anclaje. Esto no es satisfactorio, porque significa que es imposible vincular directamente a alguna sección de una página.

Answer 1

El problema con los enlaces de anclaje es que reaccionar-enrutador es usar el hash en la URL para mantener el estado. Afortunadamente, puede cambiar el comportamiento predeterminado por otra cosa, según la documentación de Ubicación . En su caso, probablemente quiera probar "URL limpias" utilizando el objeto HistoryLocation, lo que significa que react-router no usará el hash URL. Pruébelo así:

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

Answer 2

React Router Hash Link funcionó para mí. Fácil de instalar e implementar:

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

En su component.js, impórtelo como Enlace:

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

Y en lugar de usar un ancla <a> , usa <Link> :

<Link to="#faq-1>Question 1</Link>
<Link to="#faq-2>Question 2</Link>
<Link to="#faq-3>Question 3</Link>

NOTA: utilicé HashRouter lugar de Router