Bagaimana untuk Menghantar Props kepada Komponen Sasaran dalam Pautan Penghala Reaksi?

Pass Props dalam Link React-Router

Komponen Link React-Router membenarkan untuk menghantar sifat kepada komponen sasaran. Walau bagaimanapun, adalah penting untuk memastikan konfigurasi laluan yang betul untuk memudahkan pemindahan data.

Isu timbul apabila laluan laluan tidak sepadan dengan pengambilan semula harta yang dimaksudkan. Dalam kod yang disediakan, kerana komponen sasaran tidak mempunyai laluan yang sepadan:

<Route name="ideas" handler={CreateIdeaView} />

Untuk menyelesaikan isu dan lulus sifat melalui pautan, nyatakan laluan dalam konfigurasi laluan, memastikan ia sejajar dengan parameter dalam komponen:

<Route name="ideas" path="/:testvalue" handler={CreateIdeaView} />

Parameter pemegang tempat :testvalue sepadan dengan sifat yang diluluskan dalam :

<Link to="ideas" params={{ testvalue: "hello" }} />

Sifat kini boleh diakses dalam kaedah pemaparan komponen sasaran:

render: function() {
  console.log(this.props.match.params.testvalue); // logs "hello"
}

Menggunakan cangkuk dalam komponen berfungsi, anda boleh mengakses prop seperti ini:

const CreatedIdeaView = () => {
  const { testvalue } = useParams();
  console.log(testvalue); // logs "hello"
}

Sebagai alternatif, jika anda perlu menghantar parameter pertanyaan dan bukannya parameter laluan, anda boleh menggunakannya seperti ini :

<Link to={{pathname: '/ideas', query: {testvalue: "hello"}}} />

Dalam komponen sasaran:

componentDidMount() {
    console.log(this.props.location.query.testvalue) // logs "hello"
}

Atas ialah kandungan terperinci Bagaimana untuk Menghantar Props kepada Komponen Sasaran dalam Pautan Penghala Reaksi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!