Jak przekazać params z history.push w react-router v4?

Jak możemy przekazać parametr z this.props.history.push('/page') w React-Router v4?Jak przekazać params z history.push w react-router v4?

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

Źródło

2017-05-22 IshanGarg

Składnik, który jest renderowany przez 'Route' powinni mieć dostęp do' this.props.location', 'this.props.history', itp. Myślę, że nie musisz już używać 'ref' z v4. Spróbuj zrobić 'this.props.history.push ('/ template');' – saadq

To nie jest ref, to zmienna, która wskazuje na to; this.props.history.push ('/ template'); zabierz mnie na następną stronę, ale chcę przekazać im rekwizyty .ref = this; – IshanGarg

Próbujesz przekazać 'props' do komponentu pasującego do trasy? Myślę, że [ten wątek GitHub] (https://github.com/ReactTraining/react-router/issues/4105) rozwiązuje problem. – saadq

Przede wszystkim, nie trzeba robić var r = this; jak ten w if statement odnosi się do kontekstu zwrotnego samego która od używasz funkcji strzałki odnosi się do React kontekście komponentu.

Zgodnie z docs:

Historia obiekty zazwyczaj mają następujące właściwości i metody:

długość - (liczba) Liczba wpisów w stosie historii

działania - (ciąg) Bieżąca operacja (PUSH, REPLACE lub POP)

lokalizacja - (obiekt) Bieżąca lokalizacja. Mogą mieć następujące właściwości:

ścieżka - (String) Ścieżka URL

wyszukiwarka - string (ciąg) Kwerenda URL

hash - (string) URL hash fragment

państwowej - (string) stan specyficzny dla lokalizacji, który został dostarczony np push (ścieżka, stan), kiedy to położenie zostało zepchnięte na stos . Dostępne tylko w historii przeglądarki i pamięci.

Push (path, [stan]) - (funkcja) popycha nowy wpis na stos historii

zastąpić (path, [stan]) - (funkcja) Zastępuje aktualną pozycję na stosie historii

Go (n) - (funkcja) Przesuwa kursor w historii stosie przez n wpisów

goBack() - (funkcja) Odpowiednik iść (-1)

goForward() - (funkcja) Odpowiednik iść (1)

blok (monit) - (funkcja) Zapobiega nawigacji

więc podczas nawigowania można przekazać rekwizyty przejścia do obiektu historii jak

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

lub podobnie dla komponentu łącza

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

a następnie w składniku, który jest renderowane z /template trasa, można uzyskać dostęp do rekwizytów przekazanych jak

this.props.location.state.detail

Należy również pamiętać, że podczas korzystania z obiektów historii lub lokalizacji z podpór należy połączyć komponent z withRouter.

Jak na Docs:

withRouter

można uzyskać dostępu do właściwości obiektu historii i najbliższego <Route>'s meczu poprzez komponent withRouter wyższego rzędu. withRouter będzie ponownie renderował swój komponent za każdym razem, gdy zmieni się trasa z tymi samymi rekwizytami co <Route> render props: { match, location, history }.

Źródło

2017-07-23 08:41:20

Prawidłowa odpowiedź. –

Dodaj informacje, aby uzyskać parametry zapytania.

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

Więcej informacji o URLSearchParams sprawdź ten link URLSearchParams

Źródło

2018-01-22 21:27:08

Nie ma to znaczenia dla React Router 4. –

Jak przekazać params z history.push w react-router v4?

Odpowiedz

Powiązane problemy