React17 + TS + Antd + ReactRouteDom6：详细踩坑指南

作为一名技术博客领域的专家，我经常以独树一帜的观点深入剖析技术话题，以此为基础构建富有感染力的文章。此次，我将结合自己的实战经验，分享我在使用 React17 + TypeScript + Ant Design + React Router DOM6 开发过程中遇到的种种陷阱，并提供详细的解决方案，助力读者规避这些雷区，高效构建健壮的 React 应用。

背景介绍

在过去，我始终使用 Vue.js 作为前端开发的主力框架。然而，在近期的一个项目中，负责人向我提出使用 React 的要求，并表示 React 与 Vue 3.0 有着诸多相似之处。出于对自己的技术能力的自信，我拍胸脯保证可以在两天内掌握 React 的精髓。然而，实际情况却狠狠地打了我的脸，让我踏上了痛苦的踩坑之旅。

踩坑指南

接下来，我将逐一列出我在使用 React17 + TypeScript + Ant Design + React Router DOM6 时遇到的主要陷阱：

1. 使用 create-react-app 创建项目时的陷阱

当你使用 create-react-app 命令创建项目时，默认情况下，项目并不会被配置为使用 TypeScript。因此，你需要手动进行一些配置修改。具体来说，你需要在 package.json 文件中添加以下依赖项：

"typescript": "^4.5.4",
"@types/react": "^18.0.15",
"@types/react-dom": "^18.0.15",

此外，你还需要创建一个 tsconfig.json 文件，并将其配置为如下所示：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react",
    "sourceMap": true,
    "outDir": "./dist"
  },
  "include": [
    "./src"
  ]
}

2. 使用 Ant Design 时遇到的问题

Ant Design 是一个优秀的 UI 组件库，但它在某些情况下也会带来一些问题。例如：

• 使用 Table 组件时，出现列宽不一致的问题

这个问题通常是由表格列的宽度没有正确设置引起的。你可以使用以下 CSS 样式来解决这个问题：

.ant-table-fixed thead > tr > th,
.ant-table-fixed tbody > tr > td {
  width: calc(100% / 6);
}

• 使用 Form 组件时，出现表单提交后无法重置的问题

这个问题通常是由 Form 组件的 useForm() 钩子没有正确使用引起的。你可以使用以下方式来解决这个问题：

const [form] = Form.useForm();

useEffect(() => {
  form.resetFields();
}, []);

3. 使用 React Router DOM6 时遇到的问题

React Router DOM6 是一个功能强大的路由库，但它在某些情况下也会带来一些问题。例如：

• 使用 useNavigate() 钩子时，出现导航到错误页面的问题

这个问题通常是由 useNavigate() 钩子的第二个参数没有正确使用引起的。你可以使用以下方式来解决这个问题：

const navigate = useNavigate();

const handleClick = () => {
  navigate('/home', { replace: true });
};

• 使用 useLocation() 钩子时，出现获取不到 location 状态的问题

这个问题通常是由 useLocation() 钩子没有正确使用引起的。你可以使用以下方式来解决这个问题：

const location = useLocation();

useEffect(() => {
  console.log(location.pathname);
}, [location]);

4. 使用 TypeScript 时遇到的问题

TypeScript 是一门优秀的类型检查语言，但它在某些情况下也会带来一些问题。例如：

• 使用泛型时，出现类型推断错误的问题

这个问题通常是由泛型约束没有正确使用引起的。你可以使用以下方式来解决这个问题：

interface MyComponent<T> {
  prop1: T;
}

const MyComponent: MyComponent<string> = {
  prop1: 'Hello world'
};

• 使用解构时，出现类型推断错误的问题

这个问题通常是由解构表达式中没有正确使用类型断言引起的。你可以使用以下方式来解决这个问题：

const { prop1 } = { prop1: 'Hello world' } as { prop1: string };

经验总结

通过总结我在使用 React17 + TypeScript + Ant Design + React Router DOM6 时遇到的种种陷阱，我深刻地认识到：

• 扎实的理论基础是成功使用任何技术框架的关键。在使用 React 之前，我应该对 React 的基本原理和最佳实践有更深入的了解。
• 仔细阅读文档可以避免许多不必要的错误。在使用 Ant Design 和 React Router DOM6 时，我应该花更多的时间去阅读官方文档，而不是盲目地进行尝试。
• 经验丰富的开发者可以提供宝贵的指导。在遇到问题时，我应该向更资深的开发者寻求帮助，而不是苦苦挣扎。
• 持之以恒的探索和学习是技术人员的必备素质。随着技术的发展，不断学习和探索新的技术框架和工具至关重要。

结语

React17 + TypeScript + Ant Design + React Router DOM6 是一个强大的技术组合，它可以帮助开发者构建高效、健壮的 React 应用。通过分享我在使用这些技术时的踩坑经验，我希望能够帮助其他开发者避免这些雷区，并更顺利地掌握这些技术。

最后，我想强调一点：技术学习是一个持续的过程。随着技术的发展，不断学习和探索新的技术框架和工具至关重要。只有不断地拥抱新知识，我们才能在技术领域保持竞争力，并为用户创造出更好的产品和服务。