React18+Router v6迁移后TypeScript项目构建依赖报错求助

你的问题核心是@types/react-router-dom@5.x和@types/react-router-hash-link@2.x与Router v6的API不兼容导致的类型冲突，以下是几个可行的解决办法：

1. 应急：跳过库类型检查 #

如果需要快速让构建通过，可以修改tsconfig.json的compilerOptions，开启跳过第三方库类型检查：

{
  "compilerOptions": {
    // 其他配置...
    "skipLibCheck": true
  }
}

这个方法能临时屏蔽所有库的类型错误，但只是权宜之计，不建议长期使用。

2. 自定义类型定义覆盖旧类型 #

在项目根目录创建types/react-router-hash-link/index.d.ts文件，手动适配Router v6的类型：

import type { NavLinkProps } from 'react-router-dom';
import type { HashLinkProps } from 'react-router-hash-link';

declare module 'react-router-hash-link' {
  // 解决children属性冲突问题
  export interface NavHashLinkProps 
    extends Omit<NavLinkProps, 'children'>, 
            Omit<HashLinkProps, 'style' | 'className' | 'children'> {
    children?: React.ReactNode;
  }

  export const NavHashLink: React.ComponentType<NavHashLinkProps>;
  export const HashLink: React.ComponentType<HashLinkProps>;
}

同时确保tsconfig.json里包含自定义类型目录：

{
  "include": ["src", "types"]
}

这样可以覆盖旧的@types/react-router-hash-link定义，解决类型冲突。

3. 升级react-router-hash-link到v6兼容版 #

虽然官方类型还没更新，但react-router-hash-link本身已经推出了支持Router v6的版本（v3.x及以上），先安装最新版：

yarn add react-router-hash-link@latest

之后可以暂时用自定义类型（参考方法2）覆盖，或者等待@types/react-router-hash-link更新适配v6。

4. 替换为原生Router v6实现（长期方案） #

Router v6可以通过原生API实现哈希跳转的功能，摆脱第三方库依赖：

import { useEffect } from 'react';
import { useLocation, NavLink, type NavLinkProps } from 'react-router-dom';

type CustomHashLinkProps = { to: string } & NavLinkProps;

export const CustomHashLink = ({ to, children, ...props }: CustomHashLinkProps) => {
  const location = useLocation();

  useEffect(() => {
    if (location.hash) {
      const targetElement = document.querySelector(location.hash);
      targetElement?.scrollIntoView({ behavior: 'smooth' });
    }
  }, [location]);

  return <NavLink to={to} {...props}>{children}</NavLink>;
};

直接用这个组件替代NavHashLink，完全适配Router v6的类型和API。

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