state 上不存在屬性 - 將 React Router Hooks 與 TypeScript 結合使用

Question

我在使用 react-router-dom hooks + TypeScript 時遇到了一些問題。

嘗試訪問一些 state 屬性會給出一個錯誤，指出它不存在

參考：

為了繼續開發，我必須做的解決方法之一是將它投射到any

 const location = useLocation() as any;

如何將有效接口傳遞給 useLocation 泛型，以便在沒有警告的情況下訪問 state 屬性？

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

Answer 1

useLocation接受一個確定state屬性類型的通用參數，因此：

const location = useLocation<YourStateTypeHere>();

例如：

interface LocationState {
    newTransactions?: boolean;
}

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

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

---

我是如何到達那里的（因為我以前沒有使用過），以防它有用：我知道大多數鈎子的 TypeScript 綁定至少實現一個通用參數，所以當我看到 React Router 的location包含程序員定義的 state 時，我想它可能接受了一個。 因此，我打開了一個使用 React Router 和 TypeScript 的項目，並將鼠標懸停在代碼中的useLocation上。 果然，彈出窗口顯示了一個通用參數，該參數應用於state屬性。 結果！

Answer 2

不適用於路由器 V6

這是聲明

export declare function useLocation(): Location;

這不接受任何參數類型

根據github issue有人建議

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;