Panduan pemprosesan penghalaan dinamik bertindak balas: Cara melaksanakan penghalaan halaman dinamik bahagian hadapan dan lulus parameter

Panduan Pemprosesan Penghalaan Dinamik React: Cara melaksanakan penghalaan halaman dinamik bahagian hadapan dan lulus parameter

Pengenalan:
Dalam aplikasi React, penghalaan ialah salah satu mekanisme utama untuk mencapai lonjakan halaman hadapan dan lulus parameter. Untuk aplikasi besar atau situasi di mana halaman dinamik perlu diproses, pemprosesan penghalaan yang fleksibel adalah penting. Artikel ini akan memperkenalkan cara melaksanakan penghalaan halaman dinamik dan penghantaran parameter dalam React dan memberikan contoh kod khusus untuk membantu pembaca memahami dengan lebih baik.

1. Semakan pengetahuan asas penghalaan React
Dalam React, kami sering menggunakan perpustakaan React Router untuk melaksanakan fungsi penghalaan. React Router menyediakan komponen untuk menentukan peraturan penghalaan dan menggunakan komponen Komponen penghalaan asas terutamanya termasuk BrowserRouter, HashRouter, Route, Link, dll. Untuk penggunaan terperinci React Router, sila rujuk kepada dokumentasi rasmi.

2. Laksanakan penghalaan halaman dinamik

1. Tentukan peraturan penghalaan
   Dalam React, kita boleh menentukan peraturan penghalaan melalui komponen Dalam peraturan penghalaan, parameter dinamik boleh digunakan untuk memadankan URL yang berbeza untuk melaksanakan penghalaan halaman dinamik.

Sebagai contoh, kami ingin mentakrifkan peraturan penghalaan dinamik untuk memadankan URL dalam bentuk "/user/:id", di mana:id mewakili parameter dinamik. Kita boleh mentakrifkan peraturan penghalaan seperti ini:

2. Memproses parameter dinamik
   Selepas menentukan peraturan penghalaan dinamik, kita boleh dalam komponen yang sepadan Dapatkan parameter yang dihantar dalam URL melalui prop.

Dalam contoh di atas, peraturan penghalaan "/user/:id" yang kami takrifkan akan memadankan URL dalam bentuk "/user/123". Dalam komponen UserDetail, kita boleh mendapatkan parameter dinamik dalam URL melalui props.match.params.

Contoh khusus adalah seperti berikut:
import React dari 'react';
import { Route } from 'react-router-dom';

const UserDetail = (props) => {

const userId = props.match.params.id;
return (
    <div>
        <h1 id="User-Detail-Page">User Detail Page</h1>
        <p>User ID: {userId}</p>
    </div>
);

};

UserDetail lalai ;

3. Laksanakan lulus parameter

Gunakan lulus parameter Pertanyaan
1. Selain menghantar parameter melalui parameter penghalaan dinamik, kami juga boleh menggunakan parameter Pertanyaan untuk lulus parameter. Melalui parameter Pertanyaan, kami boleh menambah parameter secara langsung pada URL, seperti "/user?id=123", dan kemudian mendapatkan parameter melalui props.location.search dalam komponen sasaran.
   

Contoh khusus adalah seperti berikut:

import React dari 'react';

const UserDetail = (props) => {

const searchParams = new URLSearchParams(props.location.search);
const userId = searchParams.get('id');
return (
    <div>
        <h1 id="User-Detail-Page">User Detail Page</h1>
        <p>User ID: {userId}</p>
    </div>
);

};

export default UserDetail;

Selain parameter Pertanyaan, Kami juga boleh menggunakan parameter keadaan untuk menghantar parameter. Parameter keadaan tidak muncul dalam URL, tetapi disimpan dalam objek location.state. Kita boleh lulus parameter keadaan melalui parameter kedua apabila melompat ke halaman.
2. 
   
Contoh khusus adalah seperti berikut:

import React daripada 'react';

import { Link } daripada 'react-router-dom';

const UserList = () => {

const userList = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' }
];

return (
    <div>
        <h1 id="User-List-Page">User List Page</h1>
        <ul>
            {userList.map(user => (
                <li key={user.id}>
                    <Link
                        to={{
                            pathname: `/user/${user.id}`,
                            state: { name: user.name }
                        }}
                    >
                        {user.name}
                    </Link>
                </li>
            ))}
        </ul>
    </div>
);

};

port Senarai Pengguna lalai ;

Dalam contoh di atas, apabila kami melompat ke halaman, kami menghantar objek melalui atribut kepada, di mana nama laluan menentukan URL sasaran dan atribut keadaan boleh melepasi sebarang parameter. Dalam komponen UserDetail, kita boleh mendapatkan parameter yang diluluskan melalui props.location.state.

Ringkasan:

Melalui Penghala Reaksi, kami boleh melaksanakan penghalaan halaman dinamik bahagian hadapan dan penghantaran parameter. Apabila mentakrifkan peraturan penghalaan, anda boleh menggunakan parameter dinamik untuk memadankan URL yang berbeza dan mendapatkan parameter melalui props.match.params. Selain itu, parameter juga boleh dilalui melalui parameter Pertanyaan dan parameter keadaan. Apabila menggunakan parameter Pertanyaan, anda boleh mendapatkan parameter melalui props.location.search apabila menggunakan parameter keadaan, anda boleh mendapatkan parameter melalui props.location.state.

Di atas ialah pengenalan ringkas kepada pemprosesan penghalaan dinamik React, dan contoh kod khusus digunakan untuk membantu pembaca memahami dengan lebih baik kaedah pelaksanaan pemprosesan penghalaan. Dalam pembangunan sebenar, kita boleh memilih cara yang sesuai untuk mengendalikan penghalaan halaman dinamik dan lulus parameter mengikut keperluan.

Atas ialah kandungan terperinci Panduan pemprosesan penghalaan dinamik bertindak balas: Cara melaksanakan penghalaan halaman dinamik bahagian hadapan dan lulus parameter. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!