Giới thiệu

Trong bài viết này, chúng ta sẽ tìm hiểu về useNavigate, một hook được cung cấp bởi react-router-dom. Hook này giúp chúng ta điều hướng giữa các trang trong ứng dụng React một cách dễ dàng.

Cài đặt

Đầu tiên, chúng ta cần cài đặt react-router-dom bằng cách sử dụng npm hoặc yarn:

npm install react-router-dom

hoặc

yarn add react-router-dom

Sử dụng useNavigate

Để sử dụng useNavigate, chúng ta cần import nó từ react-router-dom:

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

Sau đó, chúng ta có thể khởi tạo nó trong component của mình:

const navigate = useNavigate();

Bây giờ, navigate là một function mà chúng ta có thể sử dụng để điều hướng đến một đường dẫn cụ thể trong ứng dụng của mình. Ví dụ:

navigate('/home');

Ví dụ

Dưới đây là một ví dụ về cách sử dụng useNavigate:

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

function MyComponent() {
  const navigate = useNavigate();

  return (
    <button onClick={() => navigate('/home')}>
      Go to Home
    </button>
  );
}

export default MyComponent;

Trong ví dụ trên, khi người dùng nhấn vào nút "Go to Home", họ sẽ được chuyển hướng đến trang "Home"

Các option trong useNavigate

replace

Option replace cho phép chúng ta thay thế entry hiện tại trong history stack thay vì thêm một entry mới.

Ví dụ:

navigate('/path/to/navigate', { replace: true });

state

Option state cho phép chúng ta truyền một object state vào entry của history stack. Object này có thể được truy cập lại thông qua location.state.

Ví dụ:

navigate('/path/to/navigate', { state: { from: 'current location' } });

Sau đó, bạn có thể truy cập location.state.from để lấy giá trị đã truyền.

search

Option search cho phép chúng ta thêm một query string vào URL.

Ví dụ:

navigate('/path/to/navigate', { search: '?sort=desc' });

URL sau khi điều hướng sẽ trở thành: '/path/to/navigate?sort=desc'.

Kết luận

Trên đây là một số option cơ bản mà bạn có thể sử dụng trong useNavigate. Hi vọng rằng thông qua bài viết này, bạn đã hiểu rõ hơn về cách sử dụng useNavigate trong react-router-dom.