Nhìn vào các hook useNavigation: React

Trong loạt bài đào tạo về React dành cho người mới bắt đầu này, chúng ta sẽ có một cái nhìn đơn giản về chức năng của useNavigation. Trước hết, chúng tôi xin nhắc bạn rằng móc này có thể truy cập được cả trong các dự án React Native và trong các dự án React sử dụng Bộ định tuyến React.

Thông tin cơ bản: React Router là gì?

Trong trường hợp dự án React một trang của bạn cần điều hướng hoặc định tuyến trang, nó sẽ sử dụng thứ gọi là định tuyến phía máy khách. Trên thực tế, trong React, giải pháp dành cho định tuyến phía máy khách được gọi là React Router.

Bài viết gợi ý: Giáo dục lập trình vỡ lòng

React Router cho phép ứng dụng của bạn điều hướng toàn bộ trang trong một URL mà không yêu cầu hoặc tải lại trang từ phía máy chủ, giúp giao diện người dùng của ứng dụng hiển thị nhanh hơn và năng động hơn.

Móc useNavigation làm gì?

useNavigation là hook có thể truy cập được trong bộ định tuyến React.

Móc này, theo tài liệu chính thức của React, cung cấp cho bạn tất cả thông tin bạn cần để điều hướng một trang. Thông tin như thế này:

• Chỉ số tải toàn cầu
• Vô hiệu hóa các hình thức trong khi thay đổi đang diễn ra.
• Thêm các chỉ báo bận vào các nút gửi
• Hiển thị bản ghi mới đang được tạo ở phía máy chủ.
• Hiển thị trạng thái mới của một bản ghi trong khi cập nhật nó

Nhưng chúng tôi muốn tập trung cụ thể vào việc thực hiện đơn giản hook useNavigation.

import { useNavigation } from "react-router-dom";

function App() {
  const navigation = useNavigation();
}

tiền boa: Lưu ý rằng chỉ nên sử dụng useNavigation với bộ định tuyến dữ liệu.

Trong đoạn mã trên, biến điều hướng có thể trả về như sau:

• navigation.state: Trạng thái này có thể không hoạt động, đang gửi hoặc đang tải.
• navigation.location: Liên kết trang mà người dùng muốn đến.
• navigation.formData: dữ liệu gửi biểu mẫu
• navigation.formAction: url mà biểu mẫu sẽ được gửi đến.
• navigation.formMethod: Chứa một trong các phương thức PATCH, PUT, POST hoặc DELETE.

Một ví dụ đơn giản

Bây giờ chúng ta muốn xem một ví dụ đơn giản về việc sử dụng use.Navigation cùng nhau. Trong React App, chúng tôi đã kết xuất một danh sách nhiệm vụ (Todo List) bên trong có một biểu mẫu nhập thông tin để chèn một nhiệm vụ mới. Một cái gì đó như thế này:

Tiếp theo, bạn có thể xem mã thành phần Ứng dụng:

export function App() {
  let navigation = useNavigation();
  let formRef = useRef(null);
  let [isAdding, setIsAdding] = useState(false);

  useEffect(() => {
    if (navigation.formData?.get('action') === 'add') {
      setIsAdding(true);
    } else if (navigation.state === 'idle') {
      setIsAdding(false);
      formRef.current?.reset();
    }
  }, [navigation]);

  return (
    <>
      <h2>Todos</h2>
      <p>
        Click on a todo item to navigate
        to the /todo/:id route.
      </p>
      <ul>
        {Object.entries(todos).map(([id, todo]) => (
          <li key={id}>
             <Link to={`/todo/${id}`}>{todo}</Link>
          </li>
        ))}
      </ul>
      <Form method="post" ref={formRef}>
      <input type="hidden" name="action" value="add" />
        <input name="todo"></input>
        <button type="submit" disabled={isAdding}>
          {isAdding ? 'Adding...' : 'Add'}
        </button>
      </Form>
    </>
  )
}

Như bạn có thể thấy trong đoạn mã trên, trong quá trình gửi biểu mẫu, móc useNavigation được sử dụng để tắt nút gửi và hiển thị từ Thêm trên nút.

Đồng thời, khi một mục mới được thêm vào danh sách, trang này sẽ tự động được chuyển hướng đến một tuyến động có tên todo/:id. Chúng ta có thể sử dụng hook useParams để định tuyến động và chuyển hướng ứng dụng đến thành phần Todo.

Hình dưới đây cho thấy nội dung của thành phần Todo. Todo/0 đại diện cho mục đầu tiên trong danh sách, Todo/1 đại diện cho mục thứ hai, v.v.

Code của thành phần này như sau:

export function Todo() {
  let params = useParams();
  return (
    <>
      <h2>You are now at todo/{params.id} route</h2>
      <p>id: {params.id}</p>
      <p>todo: {todos[params.id]}</p>
    </>
  )
}

Bây giờ chúng tôi đặt bộ định tuyến của mình trong tệp main.jsx. Tệp này chỉ định tất cả các đường dẫn chúng ta cần điều hướng.

import {
  createBrowserRouter,
  createRoutesFromElements,
  Route,
  RouterProvider,
} from "react-router-dom";


let router = createBrowserRouter( createRoutesFromElements(
  <>
  <Route path="/" action={todosAction} element={<App />} />
  <Route path="/todo/:id" element={<Todo />} />
  </>
  ) )

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
     <RouterProvider router={router} />
  </React.StrictMode>
);

Cuối cùng, todoAction của chúng tôi sẽ chịu trách nhiệm thêm một mục mới vào danh sách việc cần làm và hướng nó đến định tuyến động của chúng tôi:

export async function todosAction({ request }) {
  let formData = await request.formData();
  let todo = formData.get('todo');
  if (typeof todo === 'string') {
    addTodo(todo);
  }

  await new Promise((r) => setTimeout(r, 500)); //just to show submitting state
  return new Response(null, {
    status: 302,
    headers: { Location: `/todo/${Object.keys(todos).length-1}`},
  });
}

Kết quả

Bây giờ chúng ta có thể thấy rằng những điều sau xảy ra khi biểu mẫu được gửi:

Gửi của chúng tôi bằng với navigation.state

navigation.state chứa các phím hành động và việc cần làm.

Giá trị việc cần làm được thêm vào danh sách và trang được chuyển hướng đến việc cần làm/:id.

Trong bài viết này, chúng ta đã làm quen với useNavigatıon hook và tìm hiểu cách sử dụng của nó. Ngoài ra, chúng ta đã thấy cách triển khai hook useNavigation. Chúng tôi hy vọng bài viết này đã giúp bạn hiểu rõ hơn về cách thức hoạt động của móc useNavigation.

Cảm ơn các bạn đã cùng chúng tôi đi đến cuối bài viết. Xin vui lòng, nếu bạn thấy bài viết này hữu ích, hãy chia sẻ nó với bạn bè của bạn và cho chúng tôi những nhận xét khích lệ của bạn trong phần bình luận, và nếu bạn có bất kỳ câu hỏi nào, hãy chia sẻ chúng với chúng tôi để chúng ta cùng nhau tìm ra câu trả lời phù hợp. làm.