Penghalaan dinamik dalam React

Penghalaan dinamik dalam React membolehkan anda membuat laluan berdasarkan data atau parameter dinamik, membolehkan navigasi yang lebih fleksibel dan berkuasa dalam aplikasi anda. Ini amat berguna untuk aplikasi yang perlu memaparkan komponen berbeza berdasarkan input pengguna atau faktor dinamik lain.

Menyediakan Penghalaan Dinamik dengan Penghala Reaksi
Anda biasanya akan menggunakan perpustakaan react-router-dom untuk melaksanakan penghalaan dinamik dalam React. Berikut ialah panduan langkah demi langkah:

Pasang Penghala Reaksi: Pertama, anda perlu memasang react-router-dom jika anda belum melakukannya:
npm install react-router-dom

Buat Laluan: Tentukan laluan anda menggunakan komponen. Gunakan segmen dinamik dalam laluan untuk menangkap parameter.
JavaScript

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import UserProfile from './UserProfile';

const App = () => {
    return (
        <Router>
            <Switch>
                <Route exact path="/" component={Home} />
                <Route path="/user/:id" component={UserProfile} />
            </Switch>
        </Router>
    );
};

export default App;

Parameter Laluan Akses: Gunakan cangkuk useParams untuk mengakses parameter dinamik dalam komponen anda.
JavaScript

import React from 'react';
import { useParams } from 'react-router-dom';

const UserProfile = () => {
    const { id } = useParams();

    return (
        <div>
            <h1>User Profile</h1>
            <p>User ID: {id}</p>
        </div>
    );
};

export default UserProfile;

Contoh: Profil Pengguna Dinamik
Mari buat contoh mudah di mana kita menavigasi ke profil pengguna yang berbeza berdasarkan ID pengguna dalam URL.

Komponen Rumah: Komponen ini akan mempunyai pautan ke profil pengguna yang berbeza.
JavaScript

import React from 'react';
import { Link } from 'react-router-dom';

const Home = () => {
    return (
        <div>
            <h1>Home</h1>
            <ul>
                <li><Link to="/user/1">User 1</Link></li>
                <li><Link to="/user/2">User 2</Link></li>
                <li><Link to="/user/3">User 3</Link></li>
            </ul>
        </div>
    );
};

export default Home;

Komponen Profil Pengguna: Komponen ini akan memaparkan ID pengguna daripada URL.
JavaScript

import React from 'react';
import { useParams } from 'react-router-dom';

const UserProfile = () => {
    const { id } = useParams();

    return (
        <div>
            <h1>User Profile</h1>
            <p>User ID: {id}</p>
        </div>
    );
};

export default UserProfile;

Komponen Apl: Komponen ini menyediakan penghala dan mentakrifkan laluan.
JavaScript

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import UserProfile from './UserProfile';

const App = () => {
    return (
        <Router>
            <Switch>
                <Route exact path="/" component={Home} />
                <Route path="/user/:id" component={UserProfile} />
            </Switch>
        </Router>
    );
};

export default App;

Atas ialah kandungan terperinci Penghalaan dinamik dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!