如何扩展react-router-dom的Location类型解决TypeScript类型报错？

方法一：使用useLocation泛型参数（局部生效） #

直接给useLocation传入自定义的State类型，快速解决单个组件的类型报错：

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

// 定义包含background的State类型
type CustomLocationState = {
  background?: Location;
};

export function App() {
  // 通过泛型指定location.state的类型
  const location = useLocation<CustomLocationState>();
  // 用可选链避免空值判断，同时安全访问background
  const background = location.state?.background;
  // ...
}

方法二：全局扩展LocationState类型（项目全局生效） #

如果多个组件都需要用到这个扩展类型，在项目中创建一个类型声明文件（比如src/types/react-router.d.ts），全局修改React Router的类型：

import 'react-router-dom';

declare module 'react-router-dom' {
  // 扩展原有LocationState接口，添加background属性
  interface LocationState {
    background?: Location;
  }
}

添加该文件后，整个项目里useLocation返回的location.state都会自动包含background属性，无需在每个组件中单独指定泛型。

报错原因说明 #

React Router默认的LocationState类型是空对象{}，TypeScript无法识别你自定义的background属性，扩展类型后就能让TypeScript识别该属性的存在。

内容的提问来源于stack exchange，提问作者Nikita Polevoy