如何结合React Router 6使用Headless UI Tabs组件？

问题核心 #

使用Headless UI的Tabs组件实现可复用标签栏，配合React Router时，点击标签会触发页面跳转，而非在标签面板内切换组件，需要调整逻辑实现URL同步+面板内组件切换的效果。

原因分析 #

当前代码中，handleOnTabChange直接调用navigate触发路由跳转，导致整个页面重新渲染并跳转到目标路径；而Headless UI的Tabs组件本身具备面板切换能力，路由应仅用于同步URL状态，而非触发页面跳转。

修改方案 #

1. 调整Tabs组件，根据当前路由自动匹配选中标签 #

让Tabs组件通过useLocation获取当前URL，自动匹配对应的标签索引，确保URL与选中标签同步：

import { useState } from 'react';
import { Tab } from '@headlessui/react';
import { useLocation } from 'react-router-dom';

export interface TabData {
  route: string;
  label: string;
  component: React.ReactElement;
}    

export interface TabProps {
  tabInfo: TabData[];
  onTabChange: (selectedIndex: number) => void;
}

function Tabs({ tabInfo, onTabChange }: TabProps) {
  const location = useLocation();
  // 根据当前路径匹配对应标签的索引
  const initialIndex = tabInfo.findIndex(item => 
    location.pathname === `/${item.route}` || (item.route === '' && location.pathname === '/')
  );
  const [selectedIndex, setSelectedIndex] = useState<number>(initialIndex !== -1 ? initialIndex : 0);

  return (
    <div>
      <Tab.Group
        selectedIndex={selectedIndex}
        onChange={(selectedTabIndex: number) => {
          setSelectedIndex(selectedTabIndex);
          onTabChange(selectedTabIndex);
        }}
      >
        <Tab.List>
          {tabInfo.map((item, index) => (
            <Tab 
              key={index} 
              aria-label={`${item.label}`} 
              name={`${item.label}`}
            >
              {item.label}
            </Tab>
          ))}
        </Tab.List>

        <Tab.Panels>
          {tabInfo.map((item, index) => (
            <Tab.Panel key={index} className="bg-white p-4">
              <div>{item.component}</div>
            </Tab.Panel>
          ))}
        </Tab.Panels>
      </Tab.Group>
    </div>
  );
}

export default Tabs;

2. 修改父组件逻辑，仅同步URL而非跳转页面 #

调整handleOnTabChange，仅在当前URL与目标路径不同时更新URL，避免触发页面跳转：

import { useNavigate, useLocation } from 'react-router-dom';
import Tabs from './Tabs';
import { TabsData } from './TabsData';

function YourTabsPage() {
  const navigate = useNavigate();
  const location = useLocation();

  const handleOnTabChange = (selectedIndex: number) => {
    const path = TabsData[selectedIndex].route;
    const targetPath = path ? `/${path}` : '/';
    // 仅当路径不同时更新URL，避免重复操作
    if (location.pathname !== targetPath) {
      navigate(targetPath, { replace: true });
    }
  };

  return (
    <div>
      {/* 其他页面内容 */}
      <Tabs tabInfo={TabsData} onTabChange={handleOnTabChange} />
    </div>
  );
}

export default YourTabsPage;

3. 配置路由确保所有标签路径渲染同一页面 #

修改路由配置，让所有标签对应的路径都渲染包含Tabs组件的页面，避免跳转到单独的组件页面：

import { Routes, Route } from 'react-router-dom';
import YourTabsPage from './YourTabsPage';

function App() {
  return (
    <Routes>
      <Route path="/" element={<YourTabsPage />}>
        <Route path="tab-2-route" element={<YourTabsPage />} />
        <Route path="tab-3-route" element={<YourTabsPage />} />
        <Route path="tab-4-route" element={<YourTabsPage />} />
      </Route>
    </Routes>
  );
}

export default App;

效果说明 #

修改后，点击标签时：

• URL会同步更新为对应标签的路由
• Headless UI的Tabs组件会根据URL自动切换选中标签和对应面板组件
• 页面不会跳转，标签栏始终保持可见

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