Bagaimana untuk menghantar parameter dalam penghala tindak balas

Cara menghantar parameter dalam penghala tindak balas: 1. Gunakan kad bebas untuk menghantar parameter Anda hanya boleh menghantar rentetan, dan parameter tidak akan hilang apabila memuat semula halaman 2. Gunakan pertanyaan untuk menghantar parameter lulus objek, tetapi menyegarkan halaman akan Mengakibatkan kehilangan parameter 3. Gunakan keadaan untuk lulus parameter, anda boleh lulus objek, tatasusunan, dsb. Setelah halaman dimuat semula, parameter akan hilang.

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 17.0.1, komputer Dell G3.

Cara menghantar parameter dalam penghala tindak balas

Terdapat tiga cara untuk menghantar parameter dalam penghalaan penghala tindak balas: menghantar parameter melalui kad bebas, parameter pertanyaan dan parameter keadaan.

1. Melepasi parameter kad liar

Kaedah definisi laluan:

<Route path=&#39;/path/:name&#39; component={Path}/>

Komponen pautan:

<Link to="/path/通过通配符传参">通配符</Link>

Pemerolehan parameter :

this.props.match.params.name

Kelebihan: Mudah dan pantas, dan parameter tidak akan hilang apabila memuat semula halaman.

Kelemahan: Hanya rentetan yang boleh dihantar, dan jika terlalu banyak nilai yang diluluskan, url akan menjadi panjang dan hodoh.

Jika anda ingin memindahkan objek, anda boleh menggunakan JSON.stringify() untuk menukarnya menjadi rentetan, dan kemudian gunakan JSON.parse() untuk menukarnya semula selepas menerimanya pada halaman lain.

2. pertanyaan

Kaedah definisi laluan:

<Route path=&#39;/query&#39; component={Query}/>

Komponen pautan:

var query = {undefined
        pathname: '/query',
        query: '我是通过query传值 '
}

<Link to={query}>query</Link>

parameter Dapatkan:

this.props.location.query

Kelebihan: Elegan, objek boleh pindah

Kelemahan: Muat semula halaman, parameter hilang

3. nyatakan

Kaedah definisi laluan:

<Link to={state}>state</Link>

Komponen pautan:

var state = {undefined
        pathname: '/state',
        state: '我是通过state传值'
    }
    <Route path=&#39;/state&#39; component={State}/>

Pemerolehan parameter:

this.props . location.state

This.props.location.state di sini === 'Saya lulus nilai melalui pertanyaan'

Kelebihan: objek yang elegan dan boleh dipindahkan

Kelemahan: Muat semula halaman dan parameter hilang

Pembelajaran yang disyorkan: "tutorial video bertindak balas"

Atas ialah kandungan terperinci Bagaimana untuk menghantar parameter dalam penghala tindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!