Quartz 🪬

Navigation in React Router

4 min read

Để thực hiện điều hướng giữa các route, ta có thể dùng comopnent Link, NavLink và Navigate hoặc dùng hook useNavigate.

Replace

Props replace giúp ta thay thế path trước đó bằng path của component.

Giả sử ta có ba liên kết “Home”, “Books” và “Contacts”. Liên kết đến “Home” có props replace:

<Link to="/" replace>Home</Link>
<Link to="/books">Books</Link>
<Link to="/contacts">Contacts</Link>

Lần lượt click vào liên kết “Books” và “Contacts”, lịch sử truy cập sẽ được lưu trong một stack như sau:

|           |
| Contacts  |
|   Books   |
+-----------+

Nếu sau đó ta click vào liên kết “Home” thì nó sẽ thay thế liên kết “Contacts” ở trong lịch sử truy cập:

|           |
|   Home    |
|   Books   |
+-----------+

Dẫn đến, khi ta nhấn nút quay lại của trình duyệt thì ta sẽ thấy đường dẫn truy cập là /books thay vì /contacts.

Use case

Giả sử người dùng xem sách ở trang /books và muốn mua sách. Để mua sách, người dùng cần thực hiện đăng nhập ở trang /login. Sau khi đăng nhập, ta sẽ điều hướng người dùng đến trang /home và trang này sẽ replace lịch sử truy cập của /login. Khi đó, nếu người dùng nhất nút quay lại thì ứng dụng sẽ hiển thị trang /books thay vì /login.

Reload

Props reloadDocument giúp bỏ qua client side routing (làm cho trang tải lại khi được truy cập).

<Link to="/" reloadDocument>
  Home
</Link>

State

Cho phép lưu dữ liệu của route và dữ liệu này sẽ không được hiển thị trên thanh URL.

<Link to="/" state="Aleister">
  Home
</Link>

Để truy cập đến state, ta cần dùng hook useLocation của React Router. Hook này sẽ trả về một đối tượng thuộc kiểu Location bao gồm các thuộc tính sau:

  • pathname - path của trang hiện tại.
  • search - search parameter của URL.
  • key - một unique ID.
  • hash - lưu fragment của URL, chẳng hạn như #sale-off hay #best-seller.
  • state - lưu state truyền vào từ liên kết.

Ví dụ sử dụng state:

function Home() {
  const location = useLocation()
  return (
    <>
      <h1>Home</h1>
      <p>{location.state}</p>
    </>
  )
}

Chúng ta cũng có thể truyền state vào hàm navigate trả về từ hook useNavigate:

function NotFound() {
  const navigate = useNavigate()
 
  useEffect(() => {
    setTimeout(() => {
      navigate("/", { state: "Error: page not found" })
    }, 1000)
  }, [navigate])
 
  return <h1>NotFound</h1>
}

Khi ứng dụng điều hướng từ NotFound về Home, state của Home sẽ là "Error: page not found".

Tương tự như Link nhưng có thêm một số props.

Style

Có thể nhận vào một callback với giá trị trả về là một style object:

<NavLink to="/" style={({ isActive }) => (isActive ? { color: "red" } : {})}>
  Home
</NavLink>

Thuộc tính isActive cho biết liên kết có đang được chọn hay không.

Ngoài ra, component NavLink sẽ tự thêm vào class active khi nó đang được chọn. Ta có thể viết external CSS cho class này mà không cần dùng callback như trên:

.active {
  color: red;
}

Children

Ta có thể truyền vào children của NavLink một callback giúp render ra các JSX element (xem thêm Render Prop):

<NavLink to="/" style={({ isActive }) => (isActive ? { color: "red" } : {})}>
  {({ isActive }) => (isActive ? "Active Home" : "Home")}
</NavLink>

Trong đoạn code trên, nếu liên kết đang được chọn thì liên kết sẽ hiển thị nội dung là “Active Home”. Ngược lại, hiển thị “Home”.

Sự xuất hiện của Navigate sẽ gây ra sự điều hướng đến một route nào đó.

Giả sử, thay vì hiển thị ra chữ “The page you are looking for is not found” ở trong component NotFound, ta có thể điều hướng đến route / như sau:

function NotFound() {
  return <Navigate to="/" />
}

useNavigate

Chúng ta cũng có thể chủ động điều hướng thông qua hook useNavigate của React Router. Hook này sẽ trả về một hàm giúp thực hiện điều hướng.

function NotFound() {
  const navigate = useNavigate()
 
  useEffect(() => {
    setTimeout(() => {
      navigate("/")
    }, 1000)
  }, [navigate])
 
  return <h1>NotFound</h1>
}

Trong đoạn code trên, component NotFound sẽ tự động điều hướng sang route / sau 1 giây.

Resources

Backlinks