基于业务封装react-router-dom的Link组件

孙俊熙

已于 2024-05-20 10:52:05 修改

阅读量345

点赞数 7

分类专栏： TypeScript react 前端文章标签： react.js 前端 typescript

于 2024-05-17 15:51:40 首次发布

本文链接：https://blog.csdn.net/huihui_999/article/details/139006610

版权

前端同时被 3 个专栏收录

152 篇文章 4 订阅

订阅专栏

react

38 篇文章 1 订阅

订阅专栏

TypeScript

9 篇文章 0 订阅

订阅专栏

首先先看一下我的文件目录:

依次来看每个文件的代码:

1.OpenLink/index.tsx


import {forwardRef,HTMLAttributes,ReactElement} from 'react';
import {useHistory,useNavigator} from 'react-router-dom';
import {Button,Gap,ButtonProps} from 'antd';
import {ButtonType} from 'antd/es/button';
import linkIcon from './link.svg?react'; // 这个可以自己去找一个相关的linkIcon

type props = Omit<HTMLAttributes<HTMLAnchorElement>,'href' | 'target' | 'ref'> & ButtonProps;
export interface LinkProps extends Props{
    route?:string;
    to?:string;
    suffixIcon?:boolean | ReactElement;
    type?:ButtonType;
}
export const OpenLink = forwardRef<HTMLAnchorElement,LinkProps>(
    function OpenLink({route,to,children,type='link',suffixIcon,...restProps},ref){
        const defaultSuffixIcon = suffixIcon === true ? <linkIcon /> : suffixIcon;
        const history = useHistory(); // 或者 const navigate = useNavigator();
        return(
            <Button
              ref={ref}
              href={to}
              target='_blank'
              type={type}
              flexCenter
              {...restProps}
              onClick={()=>history.push(route)}
            >
              {children}
              {children && <Gap.Horizontal factor={1} base={4} />}
              {defaultSuffixIcon}
            </Button>
        )

    }
)

2.使用时,以简单例子为例Header/index.tsx:

import {Openlink} from '../OpenLink';
//使用时
export default function Header(){
return(
    <Openlink 
       route={'https://cn.redux.js.org/tutorials/essentials/part-4-using-data'}
       type='text'
       suffixIcon
    >
        打开redux官网
    </Openlink>
)
}

3.以我的业务使用场景举例展示AddText/index.tsx

import {OpenLink} from '../OpenLink';
import linkIcon from './link.svg?react'; 
import {routes} from '../Routes';
export const addText =()=>{
  return (
      <>
       <OpenLink
         type="primary"
         icon={linkIcon}
         route={routes.addCreate()}
      >
        增加...
      </OpenLink>
      <OpenLink
         type="primary"
         icon={linkIcon}
         route={routes.editCreate({id:'5'})} // eg:id =5
      >
        编辑...
      </>
     
  )
}

4.Routes文件

(1)Routes/index.tsx

import {routes as addCreateRoutes} from './url';

export const routes = Object.assign({},addCreateRoutes);

(2)Routes/url.tsx

import {createUrl} from '../utils'

export const routes={
    addCreate:createUrl('https://cn.redux.js.org/tutorials/essentials/part-4-using-data'),// 举例子]
    editCreate:createUrl('https://blog.csdn.net/eqera/article/details/{id}'),
}

5.utils.tsx

import uriTemplates from 'uri-templates';

export const createUrl =(tpl='')=>{
    return (args:Record<string,string | Record<string,string>> ={})=>{
        return uriTemplates(tpl).fill(args);
    }
}

uri-templates插件的使用用法,推荐阅读这篇文章:UriTemplate使用