React+TS前台项目实战（五）-- 全局常用组件Link封装+使用Omit定义类型

---

前言

接下来的几篇文章，将主要封装全局常用组件，以便于后续编写页面的简易和维护性的提高。本文将主要讲述跳转组件的封装。

---

Link组件

1. 功能分析

（1）国际化前缀自动补充，不用每次处理跳转都得写全路由，统一管理多语言功能，代码看起来也简洁很多，提高代码的可维护性
（2）定义组件的类型声明：使用Omit剔除原有类型属性ref，并使用 & 组合自己重新定义的ref和to属性声明
（3）ForwardedRef：接受一个泛型参数，定义函数组件的ref属性的类型，用于处理向下传递ref的类型
（4）国际化i18n文件详细代码看之前文章：国际化配置

2. 代码+注释说明

// @/components/Link/index.tsx
import { ForwardedRef, forwardRef, useMemo } from "react";
import { Link as RouterLink, LinkProps as RouterLinkProps, useParams, useLocation } from "react-router-dom";
import { addI18n, removeI18n } from "../../config/i18n";
type LinkProps = Omit<RouterLinkProps, "ref"> & {ref?: ForwardedRef<HTMLAnchorElement>;to?: string;
};const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {const { locale } = useParams<{ locale?: string }>(); // 获取当前语言const { pathname } = useLocation(); // 获取当前路径const { to: propsTo } = props; // 获取props中的toconst to = propsTo ?? removeI18n(pathname); // 跳转路径const getUrlWithPrefix = useMemo<RouterLinkProps["to"]>(() => {return addI18n(to, locale);}, [locale, to]); // 添加当前语言前缀return <RouterLink ref={ref} {...props} to={getUrlWithPrefix} />;
});export default Link;

3. 使用方式

// @/pages/home/index.jsx
// 引入组件
import Link from '@/components/Link/index.tsx'
// 使用
<Link to="/about" />

---

总结

下一篇讲【全局常用组件button封装】。关注本栏目，将实时更新。