Jak przekazać parametry za pomocą history.push / Link / Redirect w React-Router v4?

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

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

Przede wszystkim nie musisz tego robić, var r = this;ponieważ if statementodnosi się to do kontekstu samego wywołania zwrotnego, które ponieważ używasz funkcji strzałki, odnosi się do kontekstu komponentu React.

Według dokumentów:

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

• długość - (liczba) Liczba wpisów w stosie historii
• action - (string) Bieżąca akcja (PUSH, REPLACE lub POP)

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

  • ścieżka nazwa - (ciąg) Ścieżka adresu URL
  • szukaj - (ciąg) Ciąg zapytania adresu URL
  • hash - (string) Fragment skrótu adresu URL
  • state - (string) stan specyficzny dla lokalizacji, który został podany np. w celu wypychania (ścieżka, stan), gdy ta lokalizacja została wypchnięta na stos. Dostępne tylko w historii przeglądarki i pamięci.
• push (ścieżka, [stan]) - (funkcja) Pcha nowy wpis na stos historii
• replace (ścieżka, [stan]) - (funkcja) Zastępuje bieżący wpis na stosie historii
• go (n) - (funkcja) Przesuwa wskaźnik na stosie historii o n pozycji
• goBack () - (funkcja) Odpowiednik go (-1)
• goForward () - (funkcja) Odpowiednik go (1)
• blok (monit) - (funkcja) Uniemożliwia nawigację

Podczas nawigacji możesz przekazywać rekwizyty do obiektu historii, takiego jak

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

lub podobnie dla Linkkomponentu lub Redirectkomponentu

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

a następnie w komponencie renderowanym z /templatetrasą, możesz uzyskać dostęp do przekazanych rekwizytów jak

this.props.location.state.detail

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

Zgodnie z Dokumentami:

withRouter

Możesz uzyskać dostęp do właściwości obiektu historii i najbliższego <Route>'sdopasowania za pomocą withRouterkomponentu wyższego rzędu. withRouter ponownie renderuje swój komponent za każdym razem, gdy trasa zmienia się z tymi samymi rekwizytami, co <Route>render props: { match, location, history }.

możesz użyć,

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

możesz uzyskać dostęp do przeanalizowanych danych z /templatekomponentu, wykonując następujący kod,

const state = this.props.location.state

Przeczytaj więcej o zarządzaniu historią sesji React

• W przypadku wcześniejszych wersji:

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

  I uzyskaj dane w powiązanym komponencie, tak jak poniżej:

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

• W przypadku nowszych wersji powyższy sposób działa dobrze, ale istnieje nowy sposób:

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

  I uzyskaj dane w powiązanym komponencie, tak jak poniżej:

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

Wskazówka : statenazwa klucza była używana we wcześniejszych wersjach, aw nowszych wersjach możesz używać swojej niestandardowej nazwy do przekazywania danych, a używanie statenazwy nie jest konieczne.

Rozszerzanie rozwiązania (sugerowanego przez Shubhama Khatri) do użycia z hakami React (od 16.8):

package.json (always worth updating to latest packages)

{
     ...

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

     ...
}

Przekazywanie parametrów z wypychaniem historii:

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;

Dostęp do przekazanego parametru za pomocą useLocation z 'React-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]);

};

Jeśli musisz przekazać parametry adresu URL

tam jest świetne wyjaśnienie postu Tyler McGinnis na jego stronie, Link do postu

oto przykłady kodu:

1. w komponencie history.push:

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

2. w komponencie routera określasz trasę:

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

3. w komponencie Home:

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

Korzystanie z routera nie jest konieczne. To działa dla mnie:

Na stronie nadrzędnej

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

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

Następnie w ComponentA lub ComponentB można uzyskać dostęp

this.props.history

obiekt, w tym metodę this.props.history.push.

Aby użyć React 16.8+ (withHooks) , możesz użyć tego sposobu

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>)
} 

Źródło tutaj, aby przeczytać więcej https://reacttraining.com/react-router/web/example/auth-workflow

Dodaj informacje, aby uzyskać parametry zapytania.

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

Aby uzyskać więcej informacji o URLSearchParams, sprawdź ten link URLSearchParams