7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. React

Tìm hiểu về định tuyến lồng nhau trong React

Read Time: 6 mins

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

React là một thư viện JavaScript được xây dựng bởi Facebook để xây dựng giao diện người dùng. Nếu bạn là người mới làm quen với React, tôi khuyên bạn nên đọc một bài hướng dẫn trước đó của chúng tôi về làm quen với React. Trong hướng dẫn này, chúng ta sẽ thảo luận cách làm thế nào để xử lý định tuyến lồng nhau trong một ứng dụng web React.

Thiết lập ứng dụng

Chúng ta sẽ bắt đầu bằng cách thiết lập ứng dụng web React của chúng ta. Hãy tạo ra một thư mục dự án gọi là ReactRouting. Bên trong ReactRouting, tạo ra một tập tin gọi là app.html. Dưới đây là tập tin app.html:

Bên trong thư mục ReactRouting, khởi tạo dự án sử dụng Node Package Manager (NPM).

Nhập chi tiết dự án hoặc nhấn Enter để chấp nhận mặc định, và bạn cần phải có tập tin package.json bên trong thư mục ReactRouting.

Cài đặt các phụ thuộc reactreact-dom sử dụng npm.

Cài đặt gói babel sử dụng npm và lưu nó vào tập tin package.json.

Gói babel được yêu cầu để biến đổi mã JSX thành JavaScript. Tạo một tập tin cấu hình webpack để xử lý các cấu hình webpack. Tập tin webpack.config.js sẽ trông giống như thế này:

Code React của chúng ta sẽ nằm trong tập tin app.js. Vì vậy hãy tạo một tập tin gọi là app.js bên trong thư mục ReactRouting. Nhập các thư viện react cần thiết trong app.js. Tạo một thành phần được gọi là App có một div với một số văn bản. Kết xuất thành phần sử dụng phương thức render. Tập tin app.js cơ bản sẽ trông giống như sau:

Khởi động lại máy chủ phát triển webpack.

Một khi máy chủ đã được khởi động lại, bạn sẽ có thể xem ứng dụng React chạy trên http://localhost:8080/.

Xử lý định tuyến trong React

Chúng ta sẽ tận dụng react-router để thực hiện định tuyến và định tuyến lồng nhau. Đầu tiên, cài đặt react-router trong dự án của chúng ta.

Bây giờ chúng ta có react-router được cài đặt trong dự án của chúng ta. Hãy tạo ra một vài view để thực hiện định tuyến. Bên trong tập tin app.js, tạo ra hai thành phần được gọi là view1View2. Code sẽ trông giống như sau:

Tạo một thành phần Menu để hiển thị View1View2 khi nhấp vào. Nó sẽ trông giống như dưới đây:

Hãy sử dụng react router để hiển thị tuyến mặc định cho ứng dụng của chúng ta. Làm cho thành phần Menu thành tuyến mặc định. Đồng thời xác định tuyến cho các thành phần View1View2. Nó sẽ trông giống như dưới đây:

Lưu các thay đổi trên và khởi động lại máy chủ webpack. Bạn sẽ có menu dọc hiển thị tại http://localhost:8080/webpack-dev-server/.

An example of the vertical navigation menuAn example of the vertical navigation menuAn example of the vertical navigation menu

Hãy thử nhấp vào liên kết View1View2, và nó sẽ điều hướng đến các thành phần thích hợp.

Các tuyến lồng nhau trong React

Chúng ta đã có một thành phần App, hiển thị văn bản tiêu đề. Giả sử chúng ta muốn menu nhấn vào để hiển thị view thích hợp, nhưng chúng ta muốn nó được kết xuất bên trong thành phần App.

Chúng ta muốn Menu điều hướng có sẵn trên tất cả các trang. Để đạt được điều này, chúng ta sẽ cố gắng lồng các thành phần View1View2 của chúng ta bên trong thành phần App. Vì vậy, bất cứ khi nào View1 được kết xuất, nó sẽ được hiển thị bên trong thành phần App.

Bây giờ thay đổi cấu hình router và đặt các cấu hình định tuyến View1View2 bên trong tuyến App.

Sửa đổi thành phần App để lồng thành phần Menu bên trong nó.

Để kết xuất các tuyến được lồng bên trong thành phần App, chúng ta sẽ thêm props.children vào thành phần App. Truyền props vào như là một đối số của hàm vào thành phần App.

Đồng thời hãy bổ sung thành phần Home vào ứng dụng của chúng ta.

Bao gồm thành phần Home trong danh sách các tuyến lồng bên trong.

Lưu các thay đổi trên và khởi động lại máy chủ, và bạn sẽ có thể xem ứng dụng. Bấm vào các mục menu được liệt kê, và mỗi khi nhấp vào sẽ kết xuất thành phần lồng bên trong thành phần App.

The app nested in the App componentThe app nested in the App componentThe app nested in the App component

Tổng kết

Trong hướng dẫn này, bạn đã học được cách làm thế nào để thực hiện định tuyến lồng nhau trong một ứng dụng React sử dụng react-router. Bạn có thể phát triển các thành phần độc lập nhỏ và sau đó sử dụng các thành phần để tạo ra các ứng dụng lớn hơn. Khả năng chuyển lên từ các thành phần nhỏ sang các ứng dụng lớn là những thứ làm cho React thật sự mạnh mẽ.

React đang trở thành một trong những nền tảng mạnh mẽ để làm việc trên web. Nhưng sẽ không là gì nếu không tiếp tục tìm hiểu, và có rất nhiều nguồn tài liệu để giúp nâng cao kiến thức của bạn về React. Nếu bạn đang tìm kiếm thêm các nguồn tài nguyên để học hoặc để sử dụng trong công việc của bạn, hãy kiểm tra những gì chúng tôi có sẵn trên Envato Market.

Mã nguồn từ hướng dẫn này có sẵn trên GitHub. Hãy cho chúng tôi biết ý kiến ​​và suy nghĩ của bạn trong phần bình luận ​​dưới đây nhé.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.