Hướng dẫn cơ bản về định tuyến trong ReactJS với BrowserRouter

Xin chào các bạn开发者 React! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới định tuyến trong các ứng dụng React. Đừng lo lắng nếu bạn mới bắt đầu học lập trình; tôi sẽ là người hướng dẫn thân thiện của bạn, giải thích mọi thứ từng bước. Hãy lấy một tách cà phê và cùng nhau bắt đầu!

ReactJS - BrowserRouter

Khái niệm về Định tuyến

Định tuyến là gì?

Hãy tưởng tượng bạn đang ở trong một thư viện lớn. Bạn muốn tìm một cuốn sách cụ thể, nhưng bạn không biết nó ở đâu. Đó là lúc thư viện catalog trở nên hữu ích. Nó告诉 bạn chính xác nên tìm ở kệ nào. Trong các ứng dụng web, định tuyến hoạt động tương tự. Nó giống như một bản đồ chỉ cho ứng dụng của bạn thành phần nào nên hiển thị dựa trên URL.

Tại sao chúng ta cần định tuyến?

Giả sử bạn đang xây dựng một trang web cá nhân với các trang khác nhau: Trang chủ, Giới thiệu và Liên hệ. Nếu không có định tuyến, bạn sẽ phải tự động hiển thị và ẩn các thành phần dựa trên hành động của người dùng. Điều này rất tốn công và dễ出错. Định tuyến tự động hóa quy trình này, giúp ứng dụng của bạn trở nên có tổ chức hơn và thân thiện hơn với người dùng.

Giới thiệu BrowserRouter

Trong thế giới React, chúng ta có một công cụ tuyệt vời gọi là BrowserRouter. Nó là một phần của thư viện react-router-dom và giúp chúng ta thực hiện định tuyến trong các ứng dụng React. Hãy tưởng tượng nó như một thư thư viện cá nhân của ứng dụng bạn, luôn sẵn sàng hướng dẫn người dùng đến đúng "cuốn sách" (hoặc trong trường hợp của chúng ta, thành phần).

Cách áp dụng Router

Bây giờ chúng ta đã hiểu khái niệm, hãy cùng làm việc với một chút mã!

Bước 1: Cài đặt

Trước hết, chúng ta cần cài đặt gói react-router-dom. Mở terminal của bạn và chạy lệnh:

npm install react-router-dom

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

Hãy bắt đầu bằng cách bao bọc thành phần chính App của chúng ta với BrowserRouter. Dưới đây là cách làm:

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';

const Root = () => (
<Router>
<App />
</Router>
);

export default Root;

Trong ví dụ này, chúng ta đang nhập BrowserRouter và đổi tên thành Router để đơn giản hóa. Sau đó, chúng ta bao bọc thành phần App với Router. Điều này thiết lập ngữ cảnh định tuyến cho toàn bộ ứng dụng của chúng ta.

Bước 3: Định nghĩa các route

Bây giờ, hãy định nghĩa một số route trong thành phần App của chúng ta:

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

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

export default App;

Hãy phân tích điều này:

Chúng ta nhập Route và Switch từ react-router-dom.
Switch đảm bảo rằng chỉ có một route được hiển thị tại một thời điểm.
Mỗi Route thành phần định nghĩa một ánh xạ giữa một đường dẫn URL và một thành phần React.
Prop exact trên route trang chủ đảm bảo rằng nó chỉ khớp với đường dẫn chính xác "/".

Bước 4: Tạo导航

Bây giờ, hãy thêm một chút导航 vào ứng dụng của chúng ta:

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

const Navigation = () => (
<nav>
<ul>
<li><Link to="/">Trang chủ</Link></li>
<li><Link to="/about">Giới thiệu</Link></li>
<li><Link to="/contact">Liên hệ</Link></li>
</ul>
</nav>
);

export default Navigation;

Ở đây, chúng ta sử dụng thành phần Link từ react-router-dom. Nó giống như một thẻ <a>, nhưng nó ngăn không cho trang tải lại khi导航.

Bước 5: Kết hợp tất cả lại

Hãy cập nhật thành phần App của chúng ta để bao gồm navigation:

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Navigation from './components/Navigation';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

const App = () => (
<div>
<Navigation />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</div>
);

export default App;

Và thế là xong! Bạn đã có một ứng dụng React cơ bản với định tuyến được thiết lập.

Kỹ thuật Định tuyến Nâng cao

Bây giờ chúng ta đã覆盖 cơ bản, hãy xem xét một số kỹ thuật nâng cao:

1. Tham số URL

Đôi khi, bạn muốn truyền dữ liệu qua URL. Ví dụ, một trang hồ sơ người dùng:

<Route path="/user/:id" component={UserProfile} />

Trong thành phần UserProfile, bạn có thể truy cập tham số id như sau:

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

const UserProfile = () => {
let { id } = useParams();
return <h1>Trang hồ sơ người dùng {id}</h1>;
};

2. Định tuyến Nested

Bạn có thể đặt các route bên trong các thành phần. Điều này rất hữu ích cho các bố cục phức tạp:

const App = () => (
<div>
<Navigation />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/users" component={Users} />
</Switch>
</div>
);

const Users = () => (
<div>
<h1>Người dùng</h1>
<Switch>
<Route exact path="/users" component={UserList} />
<Route path="/users/:id" component={UserProfile} />
</Switch>
</div>
);

3. 导航 Programmatic

Đôi khi bạn muốn导航 một cách tự động, ví dụ sau khi gửi một biểu mẫu:

import { useHistory } from 'react-router-dom';

const LoginForm = () => {
let history = useHistory();

const handleSubmit = () => {
// ... xử lý logic đăng nhập
history.push('/dashboard');
};

return (
<form onSubmit={handleSubmit}>
{/* các trường biểu mẫu */}
</form>
);
};

Bảng tóm tắt các phương thức Định tuyến

Dưới đây là bảng tóm tắt các phương thức định tuyến chính mà chúng ta đã thảo luận:

Phương thức	Mục đích	Ví dụ
`<BrowserRouter>`	Bao bọc ứng dụng để启用定位	`<BrowserRouter><App /></BrowserRouter>`
`<Route>`	Định nghĩa một route	`<Route path="/about" component={About} />`
`<Switch>`	Đảm bảo chỉ hiển thị một route	`<Switch><Route ... /><Route ... /></Switch>`
`<Link>`	Tạo một liên kết đến route	`<Link to="/about">Giới thiệu</Link>`
`useParams()`	Truy cập tham số URL	`let { id } = useParams();`
`useHistory()`	导航 tự động	`history.push('/dashboard');`

Và thế là xong, các bạn! Chúng ta đã cùng nhau hành trình qua các khái niệm cơ bản của định tuyến trong React sử dụng BrowserRouter. Nhớ rằng, thực hành là cách tốt nhất để trở nên thành thạo, vì vậy đừng ngần ngại thử nghiệm các khái niệm này trong các dự án của riêng bạn.

Chúc các bạn may mắn và hy vọng các route của bạn luôn dẫn bạn đến thành phần đúng!

Credits: Image by storyset