Rumah > hujung hadapan web > tutorial js > Bagaimanakah Saya Boleh Melepasi Prop dalam Pautan Menggunakan Penghala Reaksi?

Bagaimanakah Saya Boleh Melepasi Prop dalam Pautan Menggunakan Penghala Reaksi?

DDD
Lepaskan: 2024-11-01 03:33:27
asal
473 orang telah melayarinya

How Can I Pass Props in Links Using React Router?

Pass Props dalam Pautan dalam React-Router

Apabila menggunakan komponen dalam React-Router, adalah mungkin untuk menghantar sifat kepada paparan baharu. Untuk melakukan ini, gunakan sifat kepada dan lulus objek dengan sifat yang dikehendaki. Contohnya:

<code class="js"><Link to={{ pathname: '/ideas', query: { testvalue: 'hello' } }}>Create Idea</Link></code>
Salin selepas log masuk

Dalam paparan destinasi, akses sifat yang diluluskan menggunakan corak berikut:

<code class="js">render() {
    console.log(this.props.match.params.testvalue, this.props.location.query.backurl)
    return <span>{testvalue} {backurl}</span>    
}</code>
Salin selepas log masuk

nota: sintaks di atas kini sudah lapuk

Dalam Komponen Fungsian yang dikemas kini menggunakan cangkuk:

<code class="js">const CreatedIdeaView = () => {
    const { testvalue } = useParams();
    const { query, search } = useLocation(); 
    console.log(testvalue, query.backUrl, new URLSearchParams(search).get('backUrl'))
    return <span>{testvalue} {backurl}</span>    
}</code>
Salin selepas log masuk

Pertimbangan Lanjut

  • Pastikan bahawa laluan destinasi mempunyai laluan yang sepadan yang ditentukan dengan menerima harta yang diluluskan. Dalam contoh ini, laluan hendaklah ditakrifkan seperti berikut:
<code class="js"><Route name="ideas" path="/:testvalue" handler={CreateIdeaView} /></code>
Salin selepas log masuk
  • Komponen Pautan yang digunakan dalam React-Router telah dikemas kini dalam versi terkini. Sintaks untuk menghantar sifat mungkin berbeza bergantung pada versi yang digunakan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Melepasi Prop dalam Pautan Menggunakan Penghala Reaksi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan