状态上不存在该属性-将React Router挂钩与TypeScript一起使用

Question

在使用react-router-dom钩子+ TypeScript时遇到一些问题。

尝试访问某些状态属性会提示错误，提示该属性不存在

参考：

要继续开发，我必须采取的解决方法之一就是将其强制转换为any

 const location = useLocation() as any;

如何在不发出警告的情况下将有效接口传递给useLocation泛型以便访问状态属性？

  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的{{3} }合并了程序员定义的状态，我认为它可能会接受一个状态。因此，我打开了一个使用React Router和TypeScript的项目，并将其悬停在代码中的useLocation上。果然，弹出窗口显示了一个通用参数，该参数已应用于state属性。结果！