Come passare param con history.push in react-router v4?

Come possiamo passare il parametro con this.props.history.push('/page') in React-Router v4?

 .then(response => { var r = this; if (response.status >= 200 && response.status < 300) { r.props.history.push('/template'); }); 

Prima di tutto, non è necessario fare var r = this; dato che questa if statement riferisce al contesto del callback stesso che, dal momento che si utilizza la funzione freccia, fa riferimento al contesto del componente React.

Secondo i documenti:

gli oggetti cronologici hanno in genere le seguenti proprietà e metodi:

  • length – (numero) Il numero di voci nella cronologia
  • action – (string) L’azione corrente (PUSH, REPLACE o POP)
  • posizione – (object) La posizione corrente. Può avere le seguenti proprietà:

    • pathname – (string) Il percorso dell’URL
    • search – (stringa) La stringa di query URL
    • hash – (stringa) Il frammento di hash dell’URL
    • stato – (stringa) stato specifico della posizione fornito ad esempio push (percorso, stato) quando questa posizione è stata inserita nello stack. Disponibile solo nel browser e nella cronologia della memoria.
  • push (percorso, [stato]) – (funzione) Spinge una nuova voce nella pila della cronologia
  • replace (percorso, [stato]) – (funzione) Sostituisce la voce corrente nello stack cronologia
  • go (n) – (funzione) Sposta il puntatore nella pila della cronologia per n voci
  • goBack () – (funzione) Equivalente ad andare (-1)
  • goForward () – (funzione) Equivalente ad andare (1)
  • block (prompt) – (funzione) Impedisce la navigazione

Così mentre navighi puoi passare oggetti di scena all’object della storia come

 this.props.history.push({ pathname: '/template', search: '?query=abc', state: { detail: response.data } }) 

o allo stesso modo per il componente di collegamento

  My Link  

e quindi nel componente che è reso con /template route, è ansible accedere ai puntelli passati come

 this.props.location.state.detail 

Inoltre, tieni presente che, quando si utilizzano oggetti di cronologia o posizione da oggetti di scena, è necessario connettere il componente con withRouter .

Come da documenti:

withRouter

È ansible accedere alle proprietà dell’object cronologia e alla corrispondenza 's più vicina tramite il componente ordine superiore withRouter . withRouter re-renderizza il suo componente ogni volta che il percorso cambia con gli stessi oggetti di scena di render props: { match, location, history } .

Non è necessario usare withRouter. Questo funziona per me:

Nella pagina principale,

    (  )} />  (  )} />   

Quindi in ComponentA o ComponentB è ansible accedere

this.props.history

object, incluso il metodo this.props.history.push.

Aggiungi informazioni per ottenere parametri di query.

 const queryParams = new URLSearchParams(this.props.location.search); console.log('assuming query param is id', queryParams.get('id'); 

Per maggiori informazioni su URLSearchParams controlla questo URLSearchParams