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

Question

it's been since a week that I try to resolve a problem to use React Router Link component with Ant Design Tabs component.

First I basically followed the nested route section from React Router documentation to create a Switch component with route according to desired path. As I will have to reuse the Tab component on other components later, I create a basic custom TabMenu component into which I pass an array with tab name to map dynamicaly the required tabs. I tried to wrap a Link component inside the the TabPane component for each mapped value but it doesn't work.

I saw many solution trying to resolve the problem, especially by passing the Link inside the tab props of TabPane component or using the onChange Tab prop with history hook to push to desired location. I tried both but these solutions seems a little tricky for me and don't really suit me.

The first only work if I click on the tab text because of the Link only affect the text inside tab and not the entire tab. The second work too but the use of history in this case does not seem 'conventional' to me.

I really hope there is a basic solution only with Link component. Here is my code. Thank you

import { Layout, Menu } from 'antd'
import { Link } from 'react-router-dom'
import { AimOutlined, BookOutlined, DashboardOutlined } from '@ant-design/icons'

const { SubMenu } = Menu
const { Sider } = Layout

const SideMenu = () => {
  return (
    <Sider width={208} style={{
      marginTop: 64, overflow: 'auto',
      zIndex: 1,
      height: '100vh',
      position: 'fixed',
      left: 0
    }}>
      <Menu defaultSelectedKeys={['topMenuItem1']} defaultOpenKeys={['sub1']} className={'side-menu'} mode="inline">
        <Menu.Item key={'topMenuItem1'} icon={<DashboardOutlined/>}>
          <Link to={'/'}> Tableau de bord </Link>
        </Menu.Item>
        <Menu.Item key={'topMenuItem2'} icon={<BookOutlined/>}>
          <Link to={'/missions-catalog'}>Catalogue de missions</Link>
        </Menu.Item>
        <SubMenu key="sub1" icon={<AimOutlined/>} title="Vos missions">
          <Menu.Item key="1">
            <Link to={'/company-referent-missions'}> Missions personnelles </Link>
          </Menu.Item>
          <Menu.Item key="2">
            <Link to={'/company-referent-missions/documents'}>Documents</Link>
          </Menu.Item>
          <Menu.Item key="3">
            <Link to={'/company-referent-missions/favoris'}>Favoris</Link>
          </Menu.Item>
        </SubMenu>
      </Menu>
    </Sider>

  )
}
export default SideMenu

import { Layout, PageHeader } from 'antd'
import { Route, Switch } from 'react-router'
import DashboardEmployeesMissions from '../pages/Dashboard/DashboardEmployeesMissions'
import MyAccount from '../pages/MyAccount'
import CompanyReferentMissions from '../pages/CompanyReferentMissions'
import DashboardHome from '../pages/Dashboard/DashboardHome'
import BreadcrumbNavigation from './BreadcrumbNavigation'
import MissionsCatalogHome from '../pages/MissionsCatalog/MissionsCatalogHome'

const { Content } = Layout

const MainContent = () => {
  return (
    <Content style={{ marginTop: 64, marginLeft: 208, minHeight: '100vh' }} className="main-content">
      <PageHeader title="Tableau de bord" breadcrumb={<BreadcrumbNavigation/>} subTitle="Accueil"/>
      <div className={'main-container'} style={{ backgroundColor: '#F7FBFC', padding: '24px' }}>
        <Switch>
          <Route exact={true} path={'/'}>
            <DashboardHome/>
          </Route>
          <Route path={'/missions-catalog'}>
            <MissionsCatalogHome/>
          </Route>
          <Route path={'/company-referent-missions'}>
            <CompanyReferentMissions/>
          </Route>
          <Route path={'/employees-missions'}>
            <DashboardEmployeesMissions/>
          </Route>
          <Route path={'/my-account'}>
            <MyAccount/>
          </Route>
        </Switch>
      </div>
    </Content>
  )
}
export default MainContent

import React from 'react'
import MissionListItem from '../components/MissionsListItem'
import { Space } from 'antd'
import Title from 'antd/es/typography/Title'
import { Route, Switch, useRouteMatch } from 'react-router-dom'
import MissionCatalogList from './MissionsCatalog/MissionCatalogList'
import { missionApplicationData, missionCatalogData } from '../helpers/DataSeed'
import TabMenu from '../components/TabMenu'

const referentMissionsTabsName = ['Missions', 'Documents', 'Favoris']

const CompanyReferentMissions = () => {
  let { url, path } = useRouteMatch()

  return (
    <Space direction={'vertical'} style={{ width: '100%' }}>
      <Space direction={'vertical'}>
        <Title level={4}>Mission personnelles</Title>
        <TabMenu tabName={referentMissionsTabsName} tabRouterUrl={url}/>
      </Space>
      <Switch>
        <Route exact={true} path={`${path}`}>
          <Space direction={'vertical'} size={'large'} style={{ width: '100%' }}>
            <MissionListItem headerListTitle={<Title level={3}>Candidatures</Title>}
                             dataSource={missionApplicationData()}/>
            <MissionListItem headerListTitle={<Title level={3}>Missions acceptées</Title>}/>
            <MissionListItem headerListTitle={<Title level={3}>Missions terminées</Title>}/>
          </Space>
        </Route>
        <Route path={`${path}/documents`}>
          <Space direction={'vertical'} size={'large'} style={{ width: '100%' }}>
            <MissionListItem headerListTitle={<Title level={3}>Lettres de missions</Title>}/>
            <MissionListItem headerListTitle={<Title level={3}>Attestations de temps passé</Title>}/>
            <MissionListItem headerListTitle={<Title level={3}>Ressources</Title>}/>
          </Space>
        </Route>
        <Route path={`${path}/favoris`}>
          <Space direction={'vertical'} size={'large'} style={{ width: '100%' }}>
            <MissionCatalogList missionsCatalogData={missionCatalogData}/>
          </Space>
        </Route>
      </Switch>
    </Space>
  )
}

export default CompanyReferentMissions

import { Tabs } from 'antd'
import React from 'react'

const { TabPane } = Tabs

const TabMenu = ({ tabName }) => {
  return (
    <Tabs defaultActiveKey={1}>
      {tabName.map((name, index) => {
        return (
          <TabPane key={index + 1} tab={name}/>
        )
      })}
    </Tabs>

  )
}

export default TabMenu

Answer 1

If you want to show the active tab depending on the location, you can do something like this

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

const { TabPane } = Tabs

const TabMenu = ({ tabName }) => {
  const location = useLocation();

  return (
    <Tabs 
        defaultActiveKey={1} 
        activeKey={tabName.find((name) => name === location.pathname)}
    >
      {tabName.map((name, index) => {
        return (
          <TabPane key={index + 1} tab={name}/>
        )
      })}
    </Tabs>

  )
}

export default TabMenu

If you wanted to do something different, please describe in more detail and provide a link to the https://codesandbox.io with a minimal example