ReactJS - Đường dẫn: Hướng dẫn cơ bản về việc điều hướng trong ứng dụng React của bạn

Xin chào các bạnfuture React开发者! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị qua thế giới của React routing. Là một giáo viên khoa học máy tính gần gũi của bạn, tôi ở đây để hướng dẫn bạn qua khái niệm quan trọng này sẽ nâng cấp ứng dụng React của bạn lên một tầm cao mới. Vậy, hãy thắt dây an toàn và cùng nhau lặn vào!

Đường dẫn là gì trong React?

Trước khi chúng ta bắt đầu, hãy tưởng tượng bạn đang xây dựng một ngôi nhà. Mỗi phòng trong ngôi nhà của bạn giống như một trang khác nhau trong ứng dụng web của bạn. Bây giờ, liệu có tuyệt vời không nếu bạn có thể di chuyển giữa các phòng này mà không cần phải xây dựng lại toàn bộ ngôi nhà mỗi lần? Đó chính xác là điều mà đường dẫn làm trong React!

Đường dẫn cho phép chúng ta tạo một ứng dụng trang duy nhất với nhiều视图, cho phép người dùng điều hướng giữa các thành phần (hoặc "trang") mà không cần tải lại toàn bộ ứng dụng. Nó giống như có một cánh cửa kỳ diệu có thể dẫn bạn đến bất kỳ phòng nào trong ngôi nhà của bạn ngay lập tức!

Cài đặt React Router

Để bắt đầu với đường dẫn trong React, chúng ta cần cài đặt một thư viện phổ biến叫做 React Router. Đừng lo lắng; nó dễ như ăn bánh pie!

Mở terminal của bạn, di chuyển đến thư mục dự án React của bạn, và chạy lệnh sau:

npm install react-router-dom

Lệnh này告诉 npm (Node Package Manager) cài đặt gói React Router cho chúng ta. Khi xong, chúng ta sẵn sàng bắt đầu đường dẫn!

React Router: Cơ bản

Bây giờ chúng ta đã cài đặt React Router, hãy học cách sử dụng nó. Chúng ta sẽ bắt đầu với một ví dụ đơn giản và dần dần xây dựng kiến thức của mình.

Bước 1: Nhập các thành phần cần thiết

Đầu tiên, chúng ta cần nhập các thành phần cần thiết từ React Router. Thêm các dòng này ở đỉnh tệp App.js chính của bạn:

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

Bước 2: Thiết lập Router

Tiếp theo, chúng ta sẽ bao bọc toàn bộ ứng dụng của mình với thành phần Router. Điều này cho biết React rằng chúng ta muốn启用 đường dẫn trong ứng dụng của mình:

function App() {
return (
<Router>
{/* Nội dung ứng dụng của bạn ở đây */}
</Router>
);
}

Bước 3: Định nghĩa các Đường dẫn

Bây giờ, hãy định nghĩa một số đường dẫn. Chúng ta sẽ tạo ba thành phần đơn giản: Home, About và Contact.

function Home() {
return <h2>Welcome to our Home page!</h2>;
}

function About() {
return <h2>Learn more about us on this About page.</h2>;
}

function Contact() {
return <h2>Get in touch with us via this Contact page.</h2>;
}

Để thiết lập các đường dẫn cho các thành phần này, chúng ta sử dụng thành phần Route:

function App() {
return (
<Router>
<div>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</div>
</Router>
);
}

Đây là những gì đang xảy ra:

• Từ khóa exact đảm bảo rằng thành phần Home chỉ được render khi đường dẫn chính xác là "/".
• Mỗi Route component nhận một thuộc tính path (URL) và một thuộc tính component (thành phần để render tại đường dẫn đó).

Bước 4: Thêm Navigation

Để cho phép người dùng điều hướng giữa các route, chúng ta sẽ sử dụng thành phần Link:

function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>

<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</div>
</Router>
);
}

Thành phần Link giống như một super-powered <a> tag. Nó cho phép điều hướng mà không cần tải lại toàn bộ trang.

Đường dẫn Nested

Bây giờ chúng ta đã có cơ bản, hãy nâng cấp với đường dẫn nested. Hãy tưởng tượng bạn có một trang "Products", và trong đó, bạn muốn hiển thị các danh mục sản phẩm khác nhau.

Dưới đây là cách chúng ta có thể thiết lập đường dẫn nested:

function Products() {
return (
<div>
<h2>Our Products</h2>
<ul>
<li>
<Link to="/products/electronics">Electronics</Link>
</li>
<li>
<Link to="/products/books">Books</Link>
</li>
</ul>

<Route path="/products/electronics" component={Electronics} />
<Route path="/products/books" component={Books} />
</div>
);
}

function Electronics() {
return <h3>Check out our latest gadgets!</h3>;
}

function Books() {
return <h3>Explore our extensive book collection!</h3>;
}

Trong ví dụ này, thành phần Products chứa các route của riêng nó. Khi bạn điều hướng đến "/products/electronics", bạn sẽ thấy cả Products component và Electronics component.

Lợi ích của React Router

React Router cung cấp nhiều lợi ích làm cho nó trở thành lựa chọn phổ biến cho việc xử lý đường dẫn trong các ứng dụng React. Hãy phân tích chúng:

Lợi ích	Mô tả
Đường dẫn Dynamic	Routes được định nghĩa như một phần của composition ứng dụng của bạn, không trong một tệp cấu hình.
Đường dẫn Nested	Dễ dàng tạo UI phức tạp với cấu trúc đường dẫn nested.
Kiểm soát Lịch sử	Cung cấp kiểm soát chi tiết về stack lịch sử của trình duyệt.
Chia mã	Cho phép chia mã dễ dàng, cải thiện hiệu suất ứng dụng.
Đường dẫn Declarative	Định nghĩa route của bạn như các thành phần React, làm cho chúng dễ hiểu và dễ quản lý hơn.

Kết luận

Chúc mừng! Bạn đã chính thức bước vào thế giới của React routing. Chúng ta đã bao gồm cài đặt, đường dẫn cơ bản, đường dẫn nested và lợi ích của việc sử dụng React Router. Nhớ rằng, giống như bất kỳ kỹ năng nào, đường dẫn trở nên dễ dàng hơn với việc thực hành. Vậy, đừng ngần ngại thử nghiệm và xây dựng ứng dụng có đường dẫn của riêng bạn.

Khi chúng ta kết thúc, tôi nhớ lại một học sinh đã từng nói với tôi, "React routing cảm thấy như đang cố gắng điều hướng qua một mê cung khi bị bịt mắt." Nhưng sau một chút thực hành, cùng học sinh đó đã quay lại và nói, "Bây giờ nó như tôi có bản đồ và đèn pin!" Tôi hy vọng hướng dẫn này đã cung cấp cho bạn bản đồ và đèn pin cho hành trình đường dẫn React của bạn.

Tiếp tục mã hóa, tiếp tục học tập, và quan trọng nhất, vui vẻ xây dựng các ứng dụng React tuyệt vời!

Credits: Image by storyset