Come usare i normali collegamenti di ancoraggio con router reagire-

Molto simile al this angular question: come faccio a utilizzare i collegamenti di ancoraggio per la navigazione in-page quando si utilizza reagire-router?Come usare i normali collegamenti di ancoraggio con router reagire-

In altre parole, come si implementa il seguente codice HTML semplice quando si utilizza 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>

Attualmente intercetto clic su tali collegamenti e scorro fino alla posizione di ancoraggio. Questo non è soddisfacente, perché significa che è impossibile collegarsi direttamente ad alcune sezioni di una pagina.

fonte

2015-03-06 starwed

Qualcuno modificato è una domanda in un quesito totalmente diverso. Si tratta di [link di ancoraggio] (https://www.google.com/search?q=anchor+links). – starwed

Mi piacerebbe anche conoscere la risposta a questo. Hanno detto che "non supportano questo", il che sembra ridicolo quando il prodotto è un router. – Mike

@ Mike - Sarei interessato a sentire il tuo commento sulla mia risposta in quanto ritengo che dovrebbe risolvere il problema se lo provi? –

Il problema con i collegamenti di ancoraggio è di default che di reagire-router è quello di utilizzare l'hash nell'URL per mantenere lo stato. Fortunatamente, è possibile scambiare il comportamento predefinito con qualcos'altro, come da Location documentation. Nel tuo caso probabilmente vorrai provare "clean URL" usando l'oggetto HistoryLocation, il che significa che react-router non userà l'hash dell'URL. Provalo in questo modo:

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

fonte

2015-04-05 11:03:29

Ecco come il mio router è stato inizialmente istituito (usando _Router.HistoryLocation_), ma non intercetta automaticamente _ _ collegamenti in entrambe le file JSX o contenuto inserito con _dangerouslySetInnerHTML_. Hanno detto nella pagina dei problemi di Github che non lo supportano e non suggeriscono eventi di binding per gestirli come _ $ ('a'). Click (func) _ che mi lascia interrogare su come esattamente si suppone per farlo. – Mike

Penso che il mio bisogno sia diverso dalla domanda iniziale del poster ora che ci penso. – Mike

Ho capito cosa intendi adesso. Non ho mai avuto questo requisito, quindi ho pensato che avrebbe funzionato, ma basandomi su quello che stai dicendo sembra una soluzione alternativa, ma che l'approccio di HistoryLocation potrebbe fornire un punto di partenza. –

React Router Hash Link ha funzionato per me. Facile da installare e implementare:

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

Nei tuoi Component.js importarlo come link:

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

E invece di utilizzare un ancoraggio <a>, utilizzare <Link>:

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

NOTA: Ho utilizzato HashRouter anziché Router

fonte

2017-08-19 23:43:39 maledr53

Questo ha funzionato alla grande per me! –

Come usare i normali collegamenti di ancoraggio con router reagire-

risposta

Problemi correlati