Bagaimana cara melewati params dengan history.push / Link / Redirect di react-router v4?

Bagaimana kita bisa melewatkan parameter dengan this.props.history.push('/page')React-Router v4?

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

Pertama-tama, Anda tidak perlu melakukan var r = this;ini karena if statementmerujuk pada konteks panggilan balik itu sendiri yang karena Anda menggunakan fungsi panah mengacu pada konteks komponen Bereaksi.

Menurut dokumen:

objek sejarah biasanya memiliki properti dan metode berikut:

• panjang - (jumlah) Jumlah entri dalam tumpukan riwayat
• action - (string) Tindakan saat ini (PUSH, REPLACE, atau POP)

• location - (object) Lokasi saat ini. Mungkin memiliki sifat-sifat berikut:

  • pathname - (string) Jalur URL
  • search - (string) String kueri URL
  • hash - (string) URL hash fragmen
  • state - (string) status spesifik lokasi yang disediakan untuk mis. push (path, state) ketika lokasi ini didorong ke stack. Hanya tersedia di browser dan riwayat memori.
• push (path, [state]) - (function) Mendorong entri baru ke tumpukan riwayat
• replace (path, [state]) - (function) Mengganti entri saat ini pada tumpukan riwayat
• go (n) - (function) Memindahkan penunjuk di tumpukan riwayat oleh n entri
• goBack () - (fungsi) Setara dengan pergi (-1)
• goForward () - (function) Equivalent to go (1)
• block (prompt) - (function) Mencegah navigasi

Jadi saat menavigasi Anda dapat melewati alat peraga ke objek sejarah seperti

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

atau sama untuk Linkkomponen atau Redirectkomponen

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

dan kemudian di komponen yang dirender dengan /templaterute, Anda dapat mengakses alat peraga yang dilewati seperti

this.props.location.state.detail

Juga perlu diingat bahwa, ketika menggunakan objek riwayat atau lokasi dari alat peraga Anda harus menghubungkan komponen dengan withRouter.

Sesuai Dokumen:

denganRouter

Anda bisa mendapatkan akses ke properti objek sejarah dan <Route>'skecocokan terdekat melalui komponen withRoutertingkat tinggi. withRouter akan merender ulang komponennya setiap kali rute berubah dengan alat peraga yang sama dengan <Route>render props: { match, location, history }.

kamu bisa memakai,

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

maka Anda dapat mengakses data yang diuraikan dari /templatekomponen dengan mengikuti kode,

const state = this.props.location.state

Baca lebih lanjut tentang React Session History Management

• Untuk versi sebelumnya :

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

  Dan dapatkan data dalam komponen terkait seperti di bawah ini:

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

• Untuk versi yang lebih baru cara di atas berfungsi dengan baik tetapi ada cara baru:

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

  Dan dapatkan data dalam komponen terkait seperti di bawah ini:

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

Petunjuk : statenama kunci digunakan di versi sebelumnya dan untuk versi yang lebih baru, Anda dapat menggunakan nama khusus Anda untuk meneruskan data dan menggunakan statenama tidak penting.

Memperluas solusi (disarankan oleh Shubham Khatri) untuk digunakan dengan React hooks (16.8 dan seterusnya):

package.json (always worth updating to latest packages)

{
     ...

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

     ...
}

Melewati parameter dengan dorongan riwayat:

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;

Mengakses parameter yang diteruskan menggunakan useLocation dari '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]);

};

Jika Anda harus melewati parameter URL

ada penjelasan pos yang bagus dari Tyler McGinnis di situsnya, Tautan ke pos

berikut adalah contoh kode:

1. pada komponen history.push:

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

2. pada komponen router Anda menentukan rute:

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

3. pada komponen Home:

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

Tidak perlu menggunakan withRouter. Ini bekerja untuk saya:

Di halaman induk Anda,

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

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

Kemudian di ComponentA atau ComponentB Anda dapat mengakses

this.props.history

objek, termasuk metode this.props.history.push.

Untuk menggunakan Bereaksi 16.8+ (withHooks) Anda dapat menggunakan cara ini

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

Sumber di sini untuk membaca lebih lanjut https://reacttraining.com/react-router/web/example/auth-workflow

Tambahkan info untuk mendapatkan parameter kueri.

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

Untuk info lebih lanjut tentang URLSearchParams, periksa tautan ini URLSearchParams