Xây dựng ứng dụng nhiều trang trong React: Hướng dẫn về bộ định tuyến

Tạo ứng dụng nhiều trang trong React rất đơn giản với sự trợ giúp của React Router. React Router là một thư viện mạnh mẽ cho phép bạn triển khai định tuyến trong ứng dụng React của mình. Trong bài viết này, Terus sẽ hướng dẫn các bước để thiết lập ứng dụng nhiều trang bằng React Router, bao gồm các khái niệm cơ bản và ví dụ mã để bạn bắt đầu.

React Router là gì?

React Router là một thư viện cho phép định tuyến động trong các ứng dụng React của bạn. Nó giúp bạn quản lý điều hướng và hiển thị các thành phần khác nhau dựa trên đường dẫn URL. Với React Router, bạn có thể tạo trải nghiệm nhiều trang liền mạch trong một ứng dụng một trang.

Bắt đầu

1. Cài đặt React Router

Đầu tiên, bạn cần cài đặt React Router. Mở terminal và chạy lệnh sau:

npm install react-router-dom

2. Thiết lập cấu trúc dự án của bạn

Tạo một dự án React cơ bản nếu bạn chưa làm. Thư mục dự án của bạn có thể trông giống như thế này:

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

3. Tạo thành phần cho từng trang

Tạo các thành phần cho từng trang của ứng dụng. Đối với ví dụ này, chúng ta sẽ tạo Home.txt, About.txt, và Contact.txt trong components thư mục.

Trang chủ.txt

import React from 'react';

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

export default Home;

Giới thiệu.txt

import React from 'react';

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

export default About;

Liên hệ.txt

import React from 'react';

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

export default Contact;

4. Thiết lập định tuyến trongApp.txt

Bây giờ, hãy cấu hình định tuyến trong App.txttệp của bạn. Nhập các thành phần cần thiết từ react-router-domvà thiết lập các tuyến đường của bạn.

Ứng dụng.txt

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;

Trong đoạn mã này:

• BrowserRouter(còn được gọi là Router) được sử dụng để xử lý định tuyến.
• Routexác định đường dẫn và thành phần cần hiển thị.
• Routesbao bọc nhiều Routethành phần.
• Linkđược sử dụng để tạo liên kết điều hướng.

5. Thêm một số kiểu dáng cơ bản

Bạn có thể thêm một số kiểu cơ bản App.css để làm cho phần điều hướng trông đẹp hơn.

Ứng dụng.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. Chạy ứng dụng của bạn

Cuối cùng, hãy chạy ứng dụng React của bạn bằng lệnh sau:

npm start

Mở trình duyệt và điều hướng đến http://localhost:3000. Bạn sẽ thấy ứng dụng nhiều trang của mình có các liên kết điều hướng đang hoạt động.

Phần kết luận

Với React Router, việc xây dựng một ứng dụng nhiều trang trở nên dễ dàng. Bạn đã học cách thiết lập định tuyến cơ bản, tạo thành phần trang và quản lý điều hướng. Tính linh hoạt và dễ sử dụng của React Router khiến nó trở thành một công cụ thiết yếu cho các nhà phát triển React, cho phép bạn xây dựng các ứng dụng web năng động và thân thiện với người dùng.

Terus

Thiết kế website

Thiết kế website bán hàng

dịch vụ SEO