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


218

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

Komponen yang diberikan oleh Routeharus memiliki akses ke this.props.location, this.props.history, dll saya pikir Anda tidak perlu menggunakan reflagi dengan v4. Coba lakukanthis.props.history.push('/template');
saadq

Ini bukan ref, itu variabel yang menunjuk ke ini; this.props.history.push ('/ template'); bawa saya ke halaman berikutnya tetapi saya ingin memberikan properti dengan mereka .ref = ini;
IshanGarg

Anda mencoba meneruskan propske komponen yang cocok dengan rute? Saya pikir utas GitHub ini membahas masalah Anda.
saadq

JFYI - Saya telah menghapus <a href> dan menambahkan <Link> yang juga memiliki opsi untuk mengirim status, yang dapat diakses oleh halaman berikutnya melalui, this.props.location.state.
Manohar Reddy Poreddy

Bisakah Anda menandai salah satu balasan sebagai 'jawaban'. Saya yakin orang-orang yang menghabiskan waktu mengetik mereka akan menghargainya.
James Poulose

Jawaban:


392

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


3
ya, itu berhasil. Terima kasih! Tetapi tidak yakin mengapa this.props.history.push('/template',response.data)tidak bekerja. Menurut dokumen push(path, [state]), apakah Anda pikir itu tidak akan berhasil?
Sanket Patel

1
Terima kasih untuk ini! Dalam kasus saya, saya hanya menyampaikan sejarah secara langsung, jadi saya mengakses prop saya melalui this.props.history.location.state.propName -
Nunchucks

@SanketPatel Anda perlu melakukan ini this.props.history.push ('/ template', {response: response.data})
Arsalan Ahmed Quershi

Apakah mungkin untuk membuka rute di tab baru sambil mengirimkan data dalam variabel status saat menavigasi Anda dapat melewati alat peraga ke objek riwayat?
Gaurav Kumar

3
bagaimana dengan goBack ()? ketika menavigasi kembali dengan goBack (), saya tidak dapat melihat status sejarah apa pun di props.location atau props.history.location. Menavigasi maju dengan push () berfungsi dengan baik
MariusB

40

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


Logika ini berfungsi untuk saya saat history.push dengan back_url dalam status this.props.history.push (redirect_url, {back_url: '/ needing_url'}); dan dapatkan ini di laman landas oleh this.props.location.state.back_url
Braham Dev Yadav

25
  • 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.


tolong bagikan referensi, yang mengatakan negara tidak penting, jika Anda memilikinya berguna
Akshay Vijay Jain

Dear @AkshayVijayJain, ini adalah pengalaman saya berkode. Saya tidak menulis kalimat itu berdasarkan dokumen atau referensi.
AmerllicA

22

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

};

Terima kasih banyak, tidak dapat menemukan alternatif yang diperbarui kecuali jawaban Anda!
jamezrin

10

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

Saya memiliki sesuatu seperti ini, tetapi jika saya menyegarkan halaman itu benar-benar macet
rabiaasif

@rabiaasif karena datanya sudah tidak ada lagi, Anda harus bertahan atau menyimpannya di penyimpanan lokal
Drew Cordano

3

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.


Saya pikir Anda tidak perlu withRouterkarena Anda membungkus komponen Anda dengan BrowserRouter, yang bekerja sama.
Pie 'Oh' Pah

Ya dan Anda meneruskannya propske setiap komponen yang termasuk historyprop.
Jeremy

2

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


-12

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


1
Ini sama sekali tidak relevan dengan React Router 4.
Colby Cox
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.