Tác giả: Reed Barger
Thành phần liên kết
Giả sử với NavBar, chúng tôi muốn tạo một số liên kết để có thể di chuyển xung quanh ứng dụng của mình dễ dàng hơn thay vì phải thay đổi URL theo cách thủ công trong trình duyệt.
Chúng ta có thể làm như vậy với một thành phần đặc biệt khác từ React Router DOM là Link component. Nó chấp nhận prop to, chỉ định nơi muốn liên kết điều hướng người dùng đến. Trong trường hợp này có thể có một liên kết về:
import
{
BrowserRouter as
Router,
Switch,
Route,
Link }
from
"react-router-dom"
;
export
default
function
App
(
)
{
return
(
)
;
}
function
Navbar
(
)
{
return
(
)
}
Thành phần liên kết cho phép cung cấp một số inline styles giống như bất kỳ thành phần React tiêu chuẩn nào. Nó cũng cung cấp một prop component hữu ích, vì vậy chúng tôi có thể đặt liên kết của mình làm thành phần tùy chỉnh riêng để tạo kiểu dễ dàng hơn.
Tìm việc làm React lương cao up to 2000USD
NavLink Component
Ngoài ra, React Router DOM cũng cung cấp NavLink Component rất hữu ích trong trường hợp muốn áp dụng một số kiểu đặc biệt.
Nếu bạn đang ở trên đường dẫn mà liên kết trỏ đến, điều này cho phép tạo một số kiểu liên kết hoạt động để cho người dùng biết, bằng cách xem liên kết đang ở trang nào.
Ví dụ, nếu người dùng đang ở trên trang chủ, chúng tôi có thể cho họ biết càng nhiều bằng cách sử dụng phần mềm activeStyle hỗ trợ để làm cho liên kết được in đậm và có màu đỏ khi họ ở trên trang chủ:
import
{
BrowserRouter as
Router,
Switch,
Route,
NavLink
}
from
"react-router-dom"
;
export
default
function
App
(
)
{
return
(
)
;
}
function
Navbar
(
)
{
return
(
<
NavLink
activeStyle=
{
{
fontWeight:
"bold"
,
color:
"red"
}
}
to=
"/"
Home
About
)
;
}
Ngoài ra còn có prop activeClassName có thể được thiết lập nếu bạn không muốn bao gồm các inline styles hoặc muốn nhiều kiểu có thể tái sử dụng hơn để thực hiện cùng một chức năng activeStyle.
Thành phần chuyển hướng
Một thành phần rất hữu ích khác mà React Router DOM cung cấp là thành phần chuyển hướng. Điều này có vẻ lạ khi có một thành phần thực hiện chức năng chuyển hướng người dùng khi nó được hiển thị, nhưng lại rất hữu ích.
Bất cứ khi nào bạn sử dụng một cái gì đó như một private route và có điều kiện trong đó người dùng không được xác thực, bạn có thể chuyển hướng họ trở lại trang đăng nhập.
Ngược lại, nếu chúng không được xác thực, chúng sẽ được chuyển hướng đến một public route (có thể là một route để đăng nhập) khi thành phần chuyển hướng được hiển thị:
import
{
BrowserRouter as
Router,
Switch,
Route,
Redirect
}
from
"react-router-dom"
;
export
default
function
App
(
)
{
return
(
)
;
}
function
PrivateRoute
(
{
component:
Component,
...
rest }
)
{
const
isAuth =
useAuth
(
)
;
return
(
<
Route
{
...
rest}
}
)
;
}
function
Home
(
)
{
}
function
Hidden
(
)
{
}
useHistory Hook
Trên tất cả các thành phần đầy chất lượng này, có một số hook rất hữu ích mà React Router DOM cung cấp thêm cho chúng ta.
Chúng chủ yếu hữu ích bằng cách cung cấp thông tin bổ sung mà bạn có thể sử dụng trong các thành phần của mình. Chúng có thể được gọi là các React hook bình thường mà chúng ta có thể sử dụng các giá trị của chúng một cách chính xác theo ý muốn.
Có lẽ một trong những hook hữu dụng nhất chính là useHistory hook. Có thể sử dụng nó ở đầu bất kỳ thành phần nào được khai báo trong thành phần bộ định tuyến của chúng tôi và lấy lại các dữ liệu history, bao gồm thông tin như vị trí được liên kết với thành phần chẳng hạn.
Điều này cho chúng ta biết tất cả về vị trí hiện tại của người dùng, chẳng hạn như tên đường dẫn mà họ đang truy cập, cũng như bất kỳ tham số truy vấn nào có thể được thêm vào URL của chúng tôi. Tất cả dữ liệu vị trí đều có thể truy cập được từ history.location:
import
{
useHistory }
from
"react-router-dom"
;
function
About
(
)
{
const
history =
useHistory
(
)
;
console.
log
(
history.
location.
pathname)
;
return
(
)
;
}
Ngoài ra, các thông tin lịch sử trực tiếp bao gồm các phương pháp hữu ích cho phép hướng người dùng theo chương trình đến các trang khác nhau trong ứng dụng của bạn.
Điều này rất hữu ích, ví dụ, để chuyển hướng người dùng sau khi đăng nhập hoặc trong bất kỳ tình huống nào mà cần phải đưa người dùng từ trang này sang trang khác.
Chúng tôi có thể đẩy người dùng từ trang này sang trang khác bằng cách sử dụng history.push. Khi sử dụng phương pháp đẩy, bạn chỉ cần cung cấp đường dẫn mà chúng tôi muốn đưa người dùng của mình đến bằng cách sử dụng phương pháp này. Nó thêm trang mới này vào stack về lịch sử:
import
{
useHistory }
from
"react-router-dom"
;
function
About
(
)
{
const
history =
useHistory
(
)
;
console.
log
(
history.
location.
pathname)
;
return
(
)
;
}
Cũng có thể chuyển hướng người dùng bằng history.replace, giá trị này cũng chấp nhận giá trị đường dẫn, nhưng xóa mọi thứ trong lịch sử, sau khi điều hướng được thực hiện. Điều này rất hữu ích cho những trường hợp không cần quay lại lịch sử, chẳng hạn như sau khi người dùng đã đăng xuất.
useLocation Hook
Các useLocation hook bao gồm tất cả các thông tin tương tự mà useHistory hook làm.
Điều quan trọng cần lưu ý là nếu bạn cần cả dữ liệu vị trí và sử dụng lịch sử để điều hướng người dùng của mình theo chương trình, hãy đảm bảo sử dụng History. Tuy nhiên, nếu bạn chỉ muốn dữ liệu vị trí, tất cả những gì bạn cần làm là sử dụng useLocation hoặc lấy lại tất cả dữ liệu vị trí trên một đối tượng giống với dữ liệu được cung cấp trên history. location:
import
{
useLocation }
from
"react-router-dom"
;
function
About
(
)
{
const
location =
useLocation
(
)
;
console.
log
(
location.
pathname)
;
return
(
)
;
}
useParams Hook + Dynamic Routes
Một điều mà chúng tôi không đề cập đến khi nói đến các routes là chúng tôi có thể tạo ra các dynamic routes một cách tự nhiên. Điều này có nghĩa là các tuyến không cố định và được xác định, nhưng có thể là bất kỳ số ký tự nào.
Các dynamic routes rất hữu ích trong các tình huống mà chúng tôi có, chẳng hạn như một bài đăng trên blog với một slug duy nhất. Làm cách nào để đảm bảo rằng chúng tôi hiển thị dữ liệu và các thành phần một cách thích hợp, vì slug bài đăng trên blog của chúng tôi có thể hoàn toàn khác?
Để khai báo một tham số route trên một route nhất định, nó phải được đặt trước bằng dấu hai chấm :. Nếu muốn tạo một dynamic route, “/ blog /: postSlug”, cho một thành phần bài đăng trên blog, nó có thể giống như sau:
import
React from
"react"
;
import
{
BrowserRouter as
Router,
Switch,
Route }
from
"react-router-dom"
;
export
default
function
App
(
)
{
return
(
)
;
}
function
Home
(
)
{
}
function
BlogPost
(
)
{
}
Nhưng trong thành phần BlogPost, làm cách nào để nhận được dữ liệu slug của bài đăng đó? Chúng ta có thể truy cập bất kỳ thông số tuyến nào của một tuyến đã khai báo với thành phần liên kết của nó bằng cách sử dụng useParams hook.
useParams sẽ trả về một đối tượng sẽ chứa các thuộc tính phù hợp với các tham số tuyến của chúng ta (trong trường hợp này là postSlug). Chúng ta có thể sử dụng cấu trúc đối tượng để truy cập ngay lập tức và khai báo dưới dạng một biến với tên postSlug:
import
React from
"react"
;
import
{
BrowserRouter as
Router,
Switch,
Route,
useParams }
from
"react-router-dom"
;
export
default
function
App
(
)
{
return
(
)
;
}
function
Home
(
)
{
}
function
BlogPost
(
)
{
const
[post,
setPost]
=
React.
useState
(
null
)
;
const
{
postSlug }
=
useParams
(
)
;
}
,
[postSlug]
)
;
if
(
!
post)
return
null
;
return
(
)
;
}
useRouteMatch Hook
Nếu muốn biết liệu thành phần đã cho có nằm trên một trang nhất định hay không, chúng ta có thể sử dụng useRouteMatch hook.
Ví dụ: trong bài đăng trên blog, để xem liệu trang chúng tôi đang truy cập có khớp với tuyến đường “/ blog /: postSlug” hay không, chúng tôi có thể lấy lại giá trị boolean sẽ cho chúng tôi biết liệu tuyến đường mà chúng tôi đang truy cập có khớp với mà chúng tôi đã chỉ định:
import
{
useRouteMatch }
from
"react-router-dom"
;
function
BlogPost
(
)
{
const
isBlogPostRoute =
useRouteMatch
(
"/blog/:postSlug"
)
;
}
Phỏng dịch theo bài viết gốc tại freecodecamp.org