Ada beberapa cara untuk meneruskan nilai dalam perutean reaksi

Ada tiga cara untuk meneruskan nilai dalam perutean reaksi: 1. metode "props.params", yang dapat meneruskan satu atau lebih nilai, tetapi tipe setiap nilai adalah string dan tidak dapat meneruskan objek; yang Metodenya mirip dengan metode get dalam bentuk. Parameter diteruskan dalam teks yang jelas, tetapi parameter akan hilang saat menyegarkan halaman. 3. Nyatakan metode Saat mendapatkan parameter, "this.props.match.params. nama" harus digunakan dalam metode ini, dan parameter saat menyegarkan halaman juga akan hilang. akan hilang.

Lingkungan operasi tutorial ini: Sistem Windows 10, reaksi versi 17.0.1, komputer Dell G3.

Ada beberapa cara untuk meneruskan nilai dalam perutean reaksi

Ada tiga cara untuk meneruskan nilai dalam rute:

1.props.params (disarankan)

//Setel perutean <Riwayat router={hashHistory}> <Jalur rute='/pengguna/:nama' komponen={UserPage}></Route> </Router>impor { Router,Route,Link,hashHistory} dari 'react -router';class App extends React.Component { render() { return ( <Link to="/user/sam">user</Link> // atau hashHistory.push("/user/sam"); ​​​​) } }

Saat halaman melompat ke halaman UserPage, keluarkan nilai yang diteruskan:

ekspor kelas default UserPage extends React.Component{ konstruktor(props){ super(props); } render(){ return(<div>this.props.match.params.name</div>) }}

Metode di atas dapat meneruskan satu atau lebih nilai, tetapi tipe setiap nilai adalah string, dan suatu objek tidak dapat diteruskan. Jika diteruskan, objek json dapat diubah menjadi string, dan kemudian diteruskan , json Konversi string menjadi objek dan ambil data

//Tentukan rute <Jalur rute='/pengguna/:data' komponen={UserPage}></Route>//Atur parameter var data = {id:3,nama:sam,age:36};data = JSON. stringify(data);var path = `/user/${data}`;//Melalui nilai <Link to={path}>pengguna</Link>//atau hashHistory.push(path);//Dapatkan parameter var data = JSON.parse(ini.props.params.data);var {id,nama,usia} = data;

2.query (tidak disarankan: parameter halaman penyegaran hilang)

Metode kueri sangat mudah digunakan, mirip dengan metode get dalam formulir, dan parameter diteruskan dalam teks biasa.

//Tentukan rute <Jalur rute='/pengguna' komponen={UserPage}></Route>//Atur parameter var data = {id:3,nama:sam,age:36};var path = { nama jalur:' /pengguna', kueri:data,}//Lewati nilai <Link to={path}>pengguna</Link>//atau hashHistory.push(path);//Dapatkan parameter var data = this.props.location.query ;var {id,nama,umur} = data;

3.status (tidak disarankan, parameter penyegaran halaman hilang)

Mode status mirip dengan mode posting, dan penggunaannya mirip dengan kueri.

//Setel perutean <Jalur rute='/pengguna' komponen={UserPage}></Route>//Setel parameter var data = {id:3,nama:sam,age:36};var path = { nama jalur:' /user', state:data,}//Lewati nilai <Link to={path}>pengguna</Link>//atau hashHistory.push(path);//Dapatkan parameter var data = this.props.location.state ;var {id,nama,umur} = data;

Kiat khusus:

1. Gunakan this.props.match.params.name saat mendapatkan parameter.

2. Jika mencetak dalam subkomponen, ingatlah untuk meneruskan this.props, sebagai berikut:

class Todolist extends Component { render() { return ( <DocumentTitle title="todolist"> <div id="home-container"> <section> <TodolistList {...this.props}/> //Jika tidak lulus ini .props adalah objek kosong </section> </div> </DocumentTitle> } } }ekspor Todolist default;