# 自定义Link

## 1.功能说明

自定义Link，根据传入的主题色，显示被激活时文本的颜色，active回调方法可以让父组件接收到Link是否激活的信息。

## 2.组件依赖

- react

- react-router-dom

- classnames

## 3.组件接口

```tsx
interface Iprops extends LinkProps {
    // LinkProps中参数未列出，详情请查看react-router-dom的LinkProps
    themecolor?: string // 被激活时的主题色
    active?: (active: boolean) => void // 路由切换的回调方法，根据active的值判断是否激活
}
```

## 4.案例

1)导入组件

```tsx
import CustomLink from './common/custom-link';
```

2)使用

```tsx
<CustomLink
    to={route.url}
    active={(active) => { 
        if (active) {
            // 激活了
        } 
    }}
    className="item-content"
    themecolor={route.themeColor || null}>
    <div>点我跳转</div>
</CustomLink>
```