Membina Aplikasi Berbilang Halaman dalam React: Tutorial Penghala

Mencipta aplikasi berbilang halaman dalam React adalah mudah dengan bantuan React Router. React Router ialah perpustakaan berkuasa yang membolehkan anda melaksanakan penghalaan dalam apl React anda. Dalam artikel ini, kami akan melalui langkah-langkah untuk menyediakan aplikasi berbilang halaman menggunakan Penghala React, merangkumi konsep asas dan contoh kod untuk membantu anda bermula.

Apa itu React Router?

React Router ialah perpustakaan yang membolehkan penghalaan dinamik dalam aplikasi React anda. Ia membantu anda mengurus navigasi dan memaparkan komponen berbeza berdasarkan laluan URL. Dengan React Router, anda boleh mencipta pengalaman berbilang halaman yang lancar dalam aplikasi satu halaman.

Bermula

1. Pasang Penghala Reaksi

Pertama, anda perlu memasang React Router. Buka terminal anda dan jalankan arahan berikut:

npm install react-router-dom

2. Sediakan Struktur Projek Anda

Buat projek React asas jika anda belum melakukannya. Folder projek anda mungkin kelihatan seperti ini:

my-app/
├── public/
├── src/
│   ├── components/
│   │   ├── Home.js
│   │   ├── About.js
│   │   └── Contact.js
│   ├── App.js
│   ├── index.js
│   └── App.css
└── package.json

3. Buat Komponen untuk Setiap Halaman

Buat komponen untuk setiap halaman aplikasi anda. Untuk contoh ini, kami akan mencipta Home.js, About.js dan Contact.js dalam folder komponen.

Home.js

import React from 'react';

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

export default Home;

Mengenai.js

import React from 'react';

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

export default About;

Hubungi.js

import React from 'react';

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

export default Contact;

4. Sediakan Penghalaan dalam App.js

Sekarang, konfigurasikan penghalaan dalam fail App.js anda. Import komponen yang diperlukan daripada react-router-dom dan sediakan laluan anda.

App.js

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

function 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>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Router>
  );
}

export default App;

Dalam kod ini:

• BrowserRouter (alias sebagai Router) digunakan untuk mengendalikan penghalaan.
• Laluan mentakrifkan laluan dan komponen untuk dipaparkan.
• Laluan membalut berbilang komponen Laluan.
• Pautan digunakan untuk membuat pautan navigasi.

5. Tambah Beberapa Penggayaan Asas

Anda boleh menambah beberapa gaya asas pada App.css anda untuk menjadikan navigasi kelihatan lebih baik.

App.css

nav {
  background-color: #333;
  padding: 10px;
}

nav ul {
  list-style: none;
  padding: 0;
}

nav ul li {
  display: inline;
  margin-right: 10px;
}

nav ul li a {
  color: white;
  text-decoration: none;
}

nav ul li a:hover {
  text-decoration: underline;
}

6. Jalankan Apl Anda

Akhir sekali, jalankan apl React anda dengan arahan berikut:

npm start

Buka penyemak imbas anda dan navigasi ke http://localhost:3000. Anda sepatutnya melihat aplikasi berbilang halaman anda dengan pautan navigasi yang berfungsi.

Kesimpulan

Dengan React Router, membina apl berbilang halaman menjadi mudah. Anda telah mempelajari cara menyediakan penghalaan asas, membuat komponen halaman dan mengurus navigasi. Fleksibiliti dan kemudahan penggunaan React Router menjadikannya alat penting untuk pembangun React, membolehkan anda membina aplikasi web yang dinamik dan mesra pengguna.

---

? Anda boleh membantu saya dengan Menderma

Atas ialah kandungan terperinci Membina Aplikasi Berbilang Halaman dalam React: Tutorial Penghala. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!