Geçmiş yönlendiricisi v4'te history.push / Link / Redirect ile paramlar nasıl iletilir?

this.props.history.push('/page')React-Router v4 ile parametreyi nasıl geçirebiliriz ?

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

Her şeyden önce, yapmanız gerekmez var r = this;bu in gibiif statement callback'inde kendisi bağlamında atıfta bileşen bağlamı Tepki atıfta hangi ok fonksiyonu kullanılarak beri.

Dokümanlara göre:

geçmiş nesneleri genellikle aşağıdaki özelliklere ve yöntemlere sahiptir:

• uzunluk - (sayı) Geçmiş yığınındaki giriş sayısı
• action - (dize) Geçerli eylem (PUSH, REPLACE veya POP)

• location - (nesne) Geçerli konum. Aşağıdaki özelliklere sahip olabilir:

  • pathname - (dize) URL'nin yolu
  • arama - (dize) URL sorgu dizesi
  • hash - (dize) URL karma parçası
  • durum - (konum) yığına itildiğinde itme (yol, durum) için sağlanan konuma özgü durum. Yalnızca tarayıcı ve bellek geçmişinde kullanılabilir.
• push (yol, [durum]) - (işlev) Geçmiş yığınına yeni bir giriş iter
• replace (path, [state]) - (işlev) Geçmiş yığınındaki geçerli girişi değiştirir
• go (n) - (işlev) Geçmiş yığınındaki işaretçiyi n girişle taşır
• goBack () - (işlev) Gitmeye eşdeğer (-1)
• goForward () - (işlev) Gitmeye eşdeğer (1)
• block (istemi) - (işlev) Gezinmeyi önler

Böylece navigasyon yaparken, sahne nesnesini

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

veya benzer şekilde Linkbileşen veya Redirectbileşen için

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

ve sonra /templaterota ile oluşturulan bileşende , aşağıdaki gibi geçirilen desteklere erişebilirsiniz

this.props.location.state.detail

Ayrıca, sahne malzemelerinden geçmiş veya konum nesnelerini kullanırken bileşeni bağlamanız gerektiğini unutmayın withRouter.

Dokümanlara göre:

withRouter

Geçmiş nesnesinin özelliklerine ve en yakın <Route>'seşleşmeye withRouterüst düzey bileşen aracılığıyla erişebilirsiniz . withRouter rota <Route>render ile aynı sahne ile her değiştiğinde bileşenini yeniden oluşturur props: { match, location, history }.

kullanabilirsiniz,

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

ayrıştırılan verilere /templateaşağıdaki kodu kullanarak bileşenden erişebilirsiniz ,

const state = this.props.location.state

React Session History Management hakkında devamını oku

• İçin önceki sürümleri:

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

  Ve aşağıdaki gibi ilgili bileşendeki verileri alın:

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

• Daha yeni sürümler için yukarıdaki yol iyi çalışır, ancak yeni bir yol vardır:

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

  Ve aşağıdaki gibi ilgili bileşendeki verileri alın:

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

İpucu : stateAnahtar adı önceki sürümlerde kullanıldı ve daha yeni sürümler için, özel adınızı veri iletmek için kullanabilirsiniz ve statead kullanmak gerekli değildir.

Reaksiyon kancalarıyla (16.8 sonrası) kullanım için çözeltinin (Shubham Khatri tarafından önerilen) genişletilmesi:

package.json (always worth updating to latest packages)

{
     ...

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

     ...
}

Geçmiş push ile parametreleri iletme:

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;

'Reat-router-dom' öğesinden useLocation öğesini kullanarak iletilen parametreye erişme:

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]);

};

URL parametrelerini iletmeniz gerekiyorsa

sitesinde Tyler McGinnis'in harika bir yazı açıklaması var, mesaja Bağlantı

İşte kod örnekleri:

1. history.push bileşeninde:

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

2. yönlendirici bileşeninde rotayı tanımlarsınız:

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

3. Home bileşeninde:

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

Yönlendirici ile kullanmak gerekli değildir. Bu benim için çalışıyor:

Ana sayfanızda,

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

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

Ardından, Bileşen A veya BileşenB'de şunlara erişebilirsiniz:

this.props.history

this.props.history.push yöntemini içeren nesne.

Kullanım için 16.8+ (withHooks) Tepki bu şekilde kullanabilirsiniz

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

Daha fazla bilgi edinmek için buraya kaynak https://reacttraining.com/react-router/web/example/auth-workflow

Sorgu parametrelerini almak için bilgi ekleyin.

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

URLSearchParams hakkında daha fazla bilgi için bu bağlantıyı kontrol edin URLSearchParams