Come passare i parametri con history.push / Link / Redirect nel reagente-router v4?


218

Come possiamo passare i parametri 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');
          });

Il componente che è resa da un Routedovrebbe avere accesso a this.props.location, this.props.historyecc penso che non c'è bisogno di utilizzare refpiù con v4. Prova a farethis.props.history.push('/template');
saadq,

Non è ref, è variabile che punta a questo; this.props.history.push ( '/ template'); portami alla pagina successiva ma voglio passare oggetti di scena con loro .ref = this;
IshanGarg,

Stai provando a passare propsal componente che corrisponde al percorso? Penso che questo thread di GitHub risolva le tue preoccupazioni.
Saadq,

JFYI - Ho rimosso <a href> e aggiunto <Link> che ha anche l'opzione per inviare lo stato, a cui è possibile accedere dalla pagina successiva tramite this.props.location.state.
Manohar Reddy Poreddy,

La prego di contrassegnare una delle risposte come "risposta". Sono sicuro che le persone che passano il tempo a scriverli apprezzeranno.
James Poulose il

Risposte:


392

Prima di tutto, non è necessario fare var r = this;ciò poiché si if statementriferisce al contesto del callback stesso che, poiché si sta utilizzando la funzione freccia, si riferisce al contesto del componente React.

Secondo i documenti:

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

  • lunghezza - (numero) Il numero di voci nello stack della cronologia
  • action - (stringa) L'azione corrente (PUSH, REPLACE o POP)
  • location - (oggetto) La posizione corrente. Può avere le seguenti proprietà:

    • pathname - (stringa) Il percorso dell'URL
    • search - (stringa) La stringa della query URL
    • hash - (stringa) Il frammento di hash dell'URL
    • state - stato (stringa) specifico della posizione che è stato fornito, ad esempio, per push (percorso, stato) quando questa posizione è stata inserita nello stack. Disponibile solo nella cronologia del browser e della memoria.
  • push (path, [state]) - (function) Inserisce una nuova voce nello stack della cronologia
  • sostituire (percorso, [stato]) - (funzione) Sostituisce la voce corrente nello stack della cronologia
  • go (n) - (funzione) Sposta il puntatore nello stack della cronologia di n voci
  • goBack () - (function) Equivalent to go (-1)
  • goForward () - (funzione) Equivalente a go (1)
  • blocco (prompt) - (funzione) Impedisce la navigazione

Quindi durante la navigazione puoi passare oggetti di scena all'oggetto storia come

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

o similmente per il Linkcomponente o il Redirectcomponente

<Link to={{
      pathname: '/template',
      search: '?query=abc',
      state: { detail: response.data }
    }}> My Link </Link>

e poi nel componente che è reso con /templateroute, puoi accedere agli oggetti di scena passati come

this.props.location.state.detail

Inoltre, tieni presente che, quando usi oggetti di cronologia o posizione dagli oggetti di scena, devi connettere il componente withRouter.

Secondo i documenti:

withRouter

È possibile accedere alle proprietà dell'oggetto storico e alla <Route>'scorrispondenza più vicina tramite il withRoutercomponente di ordine superiore. withRouter ridistribuirà il suo componente ogni volta che il percorso cambia con gli stessi oggetti di scena del <Route>rendering props: { match, location, history }.


3
sì, ha funzionato. Grazie! Ma non so perché this.props.history.push('/template',response.data)non funziona. Secondo i documenti di push(path, [state]), non pensi che dovrebbe funzionare?
Sanket Patel,

1
Grazie per questo! Nel mio caso stavo solo passando la storia direttamente, quindi ho avuto accesso al mio prop tramite this.props.history.location.state.propName -
Nunchucks

@SanketPatel devi farlo this.props.history.push ('/ template', {response: response.data})
Arsalan Ahmed Quershi

È possibile aprire il percorso in una nuova scheda mentre si passano i dati nella variabile di stato durante la navigazione è possibile passare oggetti di scena all'oggetto della cronologia?
Gaurav Kumar,

3
che dire di goBack ()? quando torno indietro con goBack (), non riesco a vedere nessuno degli stati della storia in props.location o props.history.location. Navigare in avanti con push () funziona benissimo
MariusB,

40

Puoi usare,

this.props.history.push("/template", { ...response }) o this.props.history.push("/template", { response: response })

quindi puoi accedere ai dati analizzati dal /templatecomponente seguendo il codice,

const state = this.props.location.state

Maggiori informazioni su React Session History Management


Questa logica ha funzionato per me mentre history.push con back_url nello stato this.props.history.push (redirect_url, {back_url: '/ needing_url'}); e ottenerlo alla landing page da this.props.location.state.back_url
Braham Dev Yadav,

25
  • Per le versioni precedenti :

    history.push('/path', yourData);

    E ottieni i dati nel componente correlato proprio come sotto:

    this.props.location.state // it is equal to yourData
  • Per le versioni più recenti il modo sopra funziona bene ma c'è un nuovo modo:

    history.push({
      pathname: '/path',
      customNameData: yourData,
    });

    E ottieni i dati nel componente correlato proprio come sotto:

    this.props.location.customNameData // it is equal to yourData

Suggerimento : il statenome chiave è stato utilizzato nelle versioni precedenti e per le versioni più recenti, è possibile utilizzare il nome personalizzato per passare i dati e l'utilizzo del statenome non è essenziale.


si prega di condividere il riferimento, che dice che lo stato non è essenziale, se lo si ha a portata di mano
Akshay Vijay Jain,

Caro @AkshayVijayJain, è la mia esperienza di programmazione. Non ho scritto quella frase basata su un documento o un riferimento.
Amerllic,

22

Estensione della soluzione (suggerita da Shubham Khatri) per l'uso con ganci React (16.8 in poi):

package.json (always worth updating to latest packages)

{
     ...

     "react": "^16.12.0",
     "react-router-dom": "^5.1.2",

     ...
}

Passando i parametri con la cronologia push:

import { useHistory } from "react-router-dom";

const FirstPage = props => {
    let history = useHistory();

    const someEventHandler = event => {
       history.push({
           pathname: '/secondpage',
           search: '?query=abc',
           state: { detail: 'some_value' }
       });
    };

};

export default FirstPage;

Accesso al parametro passato usando useLocation da 'reazioni-router-dom':

import { useEffect } from "react";
import { useLocation } from "react-router-dom";

const SecondPage = props => {
    const location = useLocation();

    useEffect(() => {
       console.log(location.pathname); // result: '/secondpage'
       console.log(location.search); // result: '?query=abc'
       console.log(location.state.detail); // result: 'some_value'
    }, [location]);

};

Grazie mille, non sono riuscito a trovare un'alternativa aggiornata tranne la tua risposta!
jamezrin,

10

Se è necessario passare i parametri URL

c'è una grande spiegazione post di Tyler McGinnis sul suo sito, Link al post

ecco alcuni esempi di codice:

  1. sul componente history.push:

    this.props.history.push(`/home:${this.state.userID}`)

  2. sul componente router si definisce il percorso:

    <Route path='/home:myKey' component={Home} />

  3. sul componente Home:

componentDidMount(){
    const { myKey } = this.props.match.params
    console.log(myKey )
}

Ho qualcosa del genere, ma se
aggiorno

@rabiaasif perché i dati non sono più presenti, è necessario persistere o archiviarli nella memoria locale
Drew Cordano

3

Non è necessario utilizzare conouter. Questo funziona per me:

Nella tua pagina principale,

<BrowserRouter>
   <Switch>
        <Route path="/routeA" render={(props)=> (
          <ComponentA {...props} propDummy={50} />
        )} />

        <Route path="/routeB" render={(props)=> (
          <ComponentB {...props} propWhatever={100} />
          )} /> 
      </Switch>
</BrowserRouter>

Quindi in ComponentA o ComponentB è possibile accedere

this.props.history

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


Penso che non sia necessario withRouterperché hai avvolto il tuo componente BrowserRouter, che funziona allo stesso modo.
Torta "Oh" Pah

Sì e stai passando il propsdown in ogni componente che include l' historyelica.
Jeremy

2

Per usare React 16.8+ (con Hooks) puoi usare in questo modo

import React from 'react';
import { useHistory } from 'react-router-dom';

export default function SomeFunctionalComponent() {
let history = useHistory(); // should be called inside react component

const handleClickButton = () => {    
"funcionAPICALL"
       .then(response => {
             if (response.status >= 200 && response.status < 300) {
                 history.push('/template');
              });
}

return ( <div> Some component stuff 
    <p>To make API POST request and redirect to "/template" click a button API CALL</p>
    <button onClick={handleClickButton}>API CALL<button>
</div>)
} 

Fonte qui per leggere di più https://reacttraining.com/react-router/web/example/auth-workflow


-12

Aggiungi informazioni per ottenere i parametri della 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 link URLSearchParams


1
Questo non è affatto rilevante per React Router 4.
Colby Cox
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.