如何在Ant Design Tab组件中使用React Router Link组件

解决方案 #

直接调整自定义TabMenu组件即可实现需求，无需使用history编程式跳转，改造后整个Tab标签区域点击都会触发Link跳转，同时适配路由刷新后的激活状态匹配：

import { Tabs } from 'antd'
import React from 'react'
import { Link, useLocation } from 'react-router-dom'

const { TabPane } = Tabs

// Tab名称和子路由后缀的映射，也可作为参数传入组件提升复用性
const tabPathMap = {
  'Missions': '',
  'Documents': 'documents',
  'Favoris': 'favoris'
}

const TabMenu = ({ tabName, tabRouterUrl }) => {
  const location = useLocation()
  // 匹配当前路由对应的Tab激活key
  const getActiveKey = () => {
    for (let i = 0; i < tabName.length; i++) {
      const currentPath = tabPathMap[tabName[i]] 
        ? `${tabRouterUrl}/${tabPathMap[tabName[i]]}` 
        : tabRouterUrl
      if (location.pathname === currentPath) return String(i + 1)
    }
    return '1'
  }

  return (
    <Tabs activeKey={getActiveKey()}>
      {tabName.map((name, index) => {
        const targetPath = tabPathMap[name] 
          ? `${tabRouterUrl}/${tabPathMap[name]}` 
          : tabRouterUrl
        return (
          <TabPane 
            key={index + 1} 
            tab={
              <Link 
                to={targetPath}
                style={{
                  display: 'block',
                  width: '100%',
                  height: '100%',
                  padding: '12px 0',
                  textDecoration: 'none'
                }}
              >
                {name}
              </Link>
            }
          />
        )
      })}
    </Tabs>
  )
}

export default TabMenu

核心调整说明 #

• 引入useLocation获取当前路由，动态计算激活的Tab，替换原有的固定defaultActiveKey，解决刷新页面后Tab激活状态和路由不匹配的问题
• 给Link组件添加块级撑满样式，让点击响应范围覆盖整个Tab标签区域，解决仅点击文本生效的问题
• 跳转路径拼接传入的父路由前缀tabRouterUrl，适配不同父路由下的Tab组件复用需求

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