Menavigasi dengan React Router React Js Bahagian A Panduan untuk Menghala dalam Aplikasi React

Selamat datang kembali ke siri React kami! Dalam catatan sebelumnya, kami membincangkan konsep penting seperti komponen, keadaan, prop dan pengendalian acara. Kini, tiba masanya untuk meneroka penghalaan dalam aplikasi React menggunakan React Router. Penghalaan membolehkan anda menavigasi antara paparan atau komponen yang berbeza dalam apl anda, mewujudkan pengalaman pengguna yang lancar ?.

Apa itu React Router?

React Router ialah perpustakaan berkuasa yang membolehkan penghalaan dalam aplikasi React. Ia membolehkan anda mentakrifkan berbilang laluan dalam aplikasi anda dan menjadikan komponen tertentu berdasarkan laluan URL. Keupayaan ini penting untuk membina aplikasi satu halaman (SPA) yang mana navigasi tidak memerlukan muat semula halaman penuh.

Memasang Penghala Reaksi
Untuk bermula, anda perlu memasang React Router. Anda boleh melakukan ini menggunakan npm:

npm install react-router-dom

Menyediakan Penghalaan Asas

Mari sediakan aplikasi mudah dengan berbilang laluan. Kami akan membuat aplikasi dengan halaman utama, halaman tentang dan halaman kenalan.

1. Cipta Komponen Asas
Mula-mula, buat tiga komponen: Laman Utama, Perihal dan Kenalan.

// Home.js
import React from 'react';

const Home = () => {
    return <h1>Home Page</h1>;
};

export default Home;

// About.js
import React from 'react';

const About = () => {
    return <h1>About Page</h1>;
};

export default About;

// Contact.js
import React from 'react';

const Contact = () => {
    return <h1>Contact Page</h1>;
};

export default Contact;

2. Sediakan Penghala
Sekarang, mari sediakan penghala dalam fail aplikasi utama anda, biasanya App.js.

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

const App = () => {
    return (
        <Router>
            <nav>
                <ul>
                    <li>
                        <Link to="/">Home</Link>
                    </li>
                    <li>
                        <Link to="/about">About</Link>
                    </li>
                    <li>
                        <Link to="/contact">Contact</Link>
                    </li>
                </ul>
            </nav>
            <Switch>
                <Route path="/" exact component={Home} />
                <Route path="/about" component={About} />
                <Route path="/contact" component={Contact} />
            </Switch>
        </Router>
    );
};

export default App;

Penjelasan:

• Penghala: Komponen BrowserRouter membalut keseluruhan aplikasi, membolehkan penghalaan.
• Pautan: Komponen Pautan digunakan untuk membuat pautan navigasi yang menukar URL tanpa memuatkan semula halaman.
• Laluan: Komponen Laluan mentakrifkan laluan dan komponen untuk dipaparkan apabila laluan itu sepadan.
• Tukar: Komponen Suis memastikan hanya satu laluan dipaparkan pada satu masa.

Menavigasi Antara Halaman
Dengan persediaan selesai, anda kini boleh menavigasi antara halaman Rumah, Perihal dan Kenalan dengan mengklik pautan dalam menu navigasi. React Router akan mengendalikan perubahan URL dan memaparkan komponen yang sesuai tanpa memuat semula halaman.

Parameter Laluan
Anda juga boleh menentukan laluan dengan parameter, membolehkan anda menghantar data dinamik. Sebagai contoh, mari buat komponen Pengguna yang memaparkan maklumat pengguna berdasarkan ID pengguna dalam URL.

1. Cipta Komponen Pengguna
User.js:

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

const User = () => {
    const { userId } = useParams();
    return <h1>User ID: {userId}</h1>;
};

export default User;

2. Kemas kini Penghala
Tambahkan laluan untuk komponen Pengguna dalam App.js anda:

<Route path="/user/:userId" component={User} />

Laluan Bersarang

Penghala React juga menyokong laluan bersarang, yang membolehkan anda memaparkan laluan anak dalam komponen induk. Ini berguna untuk membina reka letak yang kompleks.

Contoh Laluan Bersarang:

1. Buat komponen Papan Pemuka dengan laluan bersarang:

npm install react-router-dom

1. Kemas kini App.js anda untuk memasukkan laluan Papan Pemuka:

// Home.js
import React from 'react';

const Home = () => {
    return <h1>Home Page</h1>;
};

export default Home;

// About.js
import React from 'react';

const About = () => {
    return <h1>About Page</h1>;
};

export default About;

// Contact.js
import React from 'react';

const Contact = () => {
    return <h1>Contact Page</h1>;
};

export default Contact;

kini, menavigasi ke /papan pemuka/profil atau /papan pemuka/tetapan akan memaparkan komponen masing-masing dalam Papan Pemuka.

Dalam siaran ini, kami meneroka cara melaksanakan penghalaan dalam aplikasi React menggunakan React Router. Kami meliputi penyediaan penghalaan asas, menavigasi antara halaman, menggunakan parameter laluan dan membuat laluan bersarang.

Dengan konsep ini, anda boleh mencipta sistem navigasi berstruktur untuk aplikasi React anda, mempertingkatkan pengalaman pengguna dan mendayakan pemaparan kandungan dinamik.

Dalam siaran seterusnya, kami akan mendalami penggunaan React Hooks, memfokuskan pada useEffect dan cara ia boleh menguruskan kesan sampingan dalam komponen berfungsi. Nantikan!

Atas ialah kandungan terperinci Menavigasi dengan React Router React Js Bahagian A Panduan untuk Menghala dalam Aplikasi React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!