reactjs - Thuộc tính không tồn tại trong state - Sử dụng React Router Hooks với TypeScript

Tôi gặp một số vấn đề khi sử dụng hooks của react-router-dom với TypeScript.

Cố gắng truy cập một số thuộc tính của state sẽ gây ra lỗi nói rằng nó không tồn tại

Tham khảo:

Một trong những cách khắc phục mà tôi phải làm để tiếp tục phát triển, đó là ép kiểu nó sang any

 const location = useLocation() as any;

Làm thế nào tôi có thể truyền một interface hợp lệ vào generic của useLocation để truy cập các thuộc tính state mà không gặp cảnh báo?

  useDidMount(() => {
    if (location.state?.newTransactions) {
      scroll.scrollToBottom();
    }
  });

Câu trả lời #1

useLocation chấp nhận một tham số tổng quát xác định kiểu của thuộc tính state, vì vậy:

const location = useLocation<YourStateTypeHere>();

Ví dụ:

interface LocationState {
    newTransactions?: boolean;
}

// ...
const location = useLocation<LocationState>();

// ...
useDidMount(() => {
    if (location.state?.newTransactions) {
        scroll.scrollToBottom();
    }
});

Cách tôi đến được đó (vì trước đây tôi chưa từng dùng), trong trường hợp có ích: Tôi biết rằng các liên kết TypeScript cho hầu hết các hook triển khai ít nhất một tham số tổng quát, nên khi tôi thấy location của React Router bao gồm trạng thái do lập trình viên định nghĩa, tôi đoán có lẽ nó cũng nhận một tham số. Vậy nên tôi mở một dự án mà tôi đang dùng React Router và TypeScript, và di chuột qua một useLocation trong mã. Quả thật, bảng thông tin bật lên hiển thị một tham số tổng quát, được áp dụng cho thuộc tính state. Kết quả!

Câu trả lời số 2

Không hoạt động cho router V6

đây là tuyên bố

export declare function useLocation(): Location;

Điều này không cần bất kỳ loại đối số nào

Theo vấn đề trên GitHub, ai đó đã gợi ý

interface CustomizedState {
  myState: string
}

const location = useLocation();
const state = location.state as CustomizedState; // Type Casting, then you can get the params passed via router
const { myState } = state;