React Router 6.4.3+TypeScript中useLocation的any类型错误如何修复？

方法一：给useLocation指定泛型类型 #

直接在调用useLocation时传入自定义的State类型，明确state的结构：

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

// 定义你需要的Location State类型
interface CustomLocationState {
  userId?: number;
  redirectFrom?: string;
  // 根据你的业务需求添加字段
}

// 传入泛型后，location.state将不再是any
const location = useLocation<CustomLocationState>();

// 使用时可以安全访问属性，不会有类型错误
console.log(location.state?.userId);

方法二：全局扩展React Router类型 #

如果希望项目中所有useLocation都自动使用统一的State类型，可以通过声明文件扩展React Router的类型：

1. 在项目的src/types目录下创建react-router-dom.d.ts文件（如果没有types目录就新建一个）
2. 添加以下代码：

import 'react-router-dom';

declare module 'react-router-dom' {
  // 扩展LocationState接口，定义全局的state类型
  interface LocationState {
    from?: { pathname: string };
    // 其他全局需要的state字段
  }
}

这样项目中所有调用useLocation的地方，location.state都会自动继承这个类型，无需每次手动传泛型。

方法三：确保安装了正确的类型依赖 #

如果上述方法无效，先检查是否安装了@types/react-router-dom，因为React Router本身的类型定义依赖这个包：

# npm
npm install @types/react-router-dom --save-dev

# yarn
yarn add @types/react-router-dom --dev

额外说明：路由定义时指定State类型 #

如果使用React Router 6.4+的Data APIs（如createBrowserRouter），也可以在路由对象中显式指定state类型：

import { RouteObject, createBrowserRouter } from 'react-router-dom';

interface RouteState {
  // 定义该路由对应的state类型
  isAuthenticated?: boolean;
}

const routes: RouteObject[] = [
  {
    path: '/profile',
    element: <ProfilePage />,
    // 给路由的state指定类型
    state: {} as RouteState,
  },
];

const router = createBrowserRouter(routes);

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