Bagaimana untuk Melepasi Props dalam Komponen \"Pautan\" React-Router?

Pass Props dalam "Link" React-Router

Apabila menggunakan React with React-Router, anda boleh menghantar sifat kepada paparan baharu menggunakan sintaks yang diubah suai dalam komponen.

Sintaks yang dikemas kini dalam React-Router v4 dan v5

Untuk menghantar prop dalam React-Router v4 dan v5, gunakan sintaks berikut:

<Link to={{ pathname: path, query: queryObject, search: searchString }}>
  ...
</Link>

di mana:

• nama laluan ialah laluan ke paparan baharu.
• pertanyaan ialah objek yang mengandungi parameter pertanyaan.
• carian ialah rentetan yang mewakili rentetan pertanyaan, seperti ?foo=bar.

Mengakses Props dalam Komponen Destinasi

Dalam komponen destinasi, anda boleh mengakses prop yang diluluskan melalui Pautkan dengan menggunakan teknik berikut:

Penggunaan lapuk komponen tertib tinggi withRouter:

• Balut komponen destinasi dengan withRouter, yang menyediakan akses kepada padanan dan prop lokasi:

const NewView = withRouter(OriginalView);

Pelaksanaan semasa menggunakan cangkuk:

• Gunakan useParams dan useLocation cangkuk dalam komponen berfungsi untuk mengakses prop padanan dan lokasi:

const NewView = () => {
  const { testvalue } = useParams();
  const { query, search } = useLocation();

  return (
    <div>
      {testvalue} {query.backUrl}
    </div>
  );
};

Contoh

Pertimbangkan contoh berikut:

App.js:

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

CreateIdeaView.js:

const CreateIdeaView = () => {
  const { testvalue } = useParams();
  console.log(testvalue); // prints 'hello'

  return (
    <div>{testvalue}</div>
  );
};

Dalam contoh ini, mengklik pautan "Buat Idea" melepasi nilai ujian sifat dengan nilai helo kepada komponen CreateIdeaView.

Nota:

• Laluan dalam komponen Pautan hendaklah termasuk pemegang tempat parameter, mis. laluan: '/ideas/:testvalue'.
• Cakuk useParams mengembalikan objek dengan semua parameter yang ditentukan dalam laluan.
• Cakuk useLocation mengembalikan objek dengan maklumat tentang lokasi semasa, termasuk pertanyaan dan carian.
• Pertanyaan ialah objek yang mengandungi pasangan nilai kunci, manakala rentetan carian mengandungi keseluruhan rentetan pertanyaan.

Atas ialah kandungan terperinci Bagaimana untuk Melepasi Props dalam Komponen \"Pautan\" React-Router?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!