如何在Ant设计选项卡组件中使用React Router Link组件

Question

一周以来，我一直在尝试解决一个问题，即在Ant Design Tabs组件中使用React Router Link组件。

首先，我基本上遵循React Router文档中的嵌套路由部分来创建一个交换机组件，并根据所需的路径进行路由。由于稍后我必须在其他组件上重用Tab组件，因此我创建了一个基本的自定义TabMenu组件，我将一个带有选项卡名的数组传递到该组件中，以动态映射所需的选项卡。我试图为每个映射值在TabPane组件中包装一个链接组件，但它不起作用。

我看到了许多试图解决这个问题的解决方案，特别是通过在TabPane组件的标签属性中传递链接，或者使用带有历史挂钩的onChange标签属性来推送到所需的位置。我两个都试过了，但这些解决方案对我来说似乎有点棘手，并不真正适合我。

由于链接只影响选项卡内的文本而不是整个选项卡，因此第一种方法仅在我单击选项卡文本时起作用。第二项工作也是如此，但在我看来，在这种情况下使用历史并不“传统”。

我真的希望有一个只有Link组件的基本解决方案。这是我的代码。谢谢

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

如果要根据位置显示活动选项卡，可以执行以下操作

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

如果您想做一些不同的事情，请更详细地描述，并提供一个指向https://codesandbox.io的链接，并提供一个最小的示例