React Routerlà một thư viện được sử dụng để điều hướng giữa các trang (page) và các thành phần (component) trong ứng dụng React Js. Thư viện cung cấp cho chúng ta các công cụ để quản lý lịch sử duyệt web (browser history) và cho phép chúng ta tạo ra các đường dẫn (URLs) có ý nghĩa và tùy chỉnh cho các trang và thành phần trong ứng dụng. React Router giúp chúng ta tạo ra một trải nghiệm điều hướng trang web mượt mà và giao diện người dùng đáp ứng, giúp tăng tính tương tác và sự linh hoạt của ứng dụng.
Cú pháp của React Router Dom
BrowserRouter: một component để bao bọc ứng dụng của bạn, cho phép sử dụng các đường dẫn (URLs) trong trình duyệt.
Route: một component để định nghĩa một đường dẫn (URL) và kết nối đường dẫn này với một component cụ thể.
Link: một component để tạo liên kết (link) đến một đường dẫn (URL).
Switch: một component để chọn một Route duy nhất từ nhiều Route có thể khớp với đường dẫn hiện tại.
Các thành phần và API khác như Redirect và useHistory cũng được cung cấp bởi React Router Dom để giúp quản lý định tuyến trong ứng dụng của bạn.
Cách cài đặt và sử dụng Router trong React Js
Để sử dụng React Router trong ứng dụng của mình, ta cần cài đặt react-router-dom package bằng npm. Bạn có thể thực hiện lệnh sau trong terminal để cài đặt:
npm install react-router-dom
Sau khi đã cài đặt xong, ta có thể bắt đầu sử dụng Router trong React Js. Dưới đây là một ví dụ về cách sử dụng Router trong React Js:
import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
<a href="https://nodemy.vn/tim-hieu-ve-ham-trong-javascript-cach-tao-truyen-tham-so-va-su-dung-mot-cach-hieu-qua-don-gian-de-hieu-danh-cho-nguoi-moi-bat-dau-important/">function</a> App() {
return (
<Router>
<div>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</div>
</Router>
);
}
export default App;
Trong đoạn mã trên, chúng ta đã sử dụng BrowserRouter để bọc toàn bộ ứng dụng, tạo ra một router mới. Sau đó, ta định nghĩa các Route với các path khác nhau để định tuyến đến các trang khác nhau của ứng dụng. Switch được sử dụng để chỉ cho React Router biết chỉ chọn một Route duy nhất để hiển thị tại một thời điểm.
Với mỗi Route, ta sử dụng thuộc tính “path” để định nghĩa đường dẫn tương ứng và thuộc tính “component” để định nghĩa component sẽ được hiển thị khi đường dẫn tương ứng được truy cập.
Kết luận và bài viết có liên quan
Bài viết có liên quan: Nên chọn Redux thuần hay Redux toolkitTim hiểu về function component trong React JsTìm hiểu useMemo trong React JsTìm hiểu về useCallback trong React Js
