React Router Dom：导航至同一组件时实现动态标签名称切换

问题说明 #

点击侧边栏的「Home」菜单项时，TabExamplePointing 组件显示「Person1、Person2、Person3」标签；点击「Channels」菜单项时，需要显示「Youtube channels、Facebook pages、Twitter profiles」这类不同标签，当前代码两个菜单项传递的是同一套标签配置，需修改实现差异化展示。

修改步骤 #

1. 更新 Sidebar.jsx，传递不同的标签配置

给「Home」和「Channels」分别定义对应的标签配置对象，导航时传递各自的配置：

import React from "react";
import { Menu, Sidebar } from "semantic-ui-react";
import { useNavigate } from "react-router-dom";

const SidebarExampleVisible = () => {
  const navigate = useNavigate();
  
  // Home对应的标签配置
  const personTabs = {
    Tab1: "Person1",
    Tab2: "Person2",
    Tab3: "Person3"
  };
  
  // Channels对应的标签配置
  const channelTabs = {
    Tab1: "Youtube channels",
    Tab2: "Facebook pages",
    Tab3: "Twitter profiles"
  };

  return (
    <Sidebar as={Menu} vertical visible width="thin">
      <Menu.Item as="a">
        <span
          onClick={() => {
            navigate(`/components/TabExamplePointing`, { state: personTabs });
          }}
        >
          Home
        </span>
      </Menu.Item>
      <Menu.Item as="a">
        <span
          onClick={() => {
            navigate(`/components/TabExamplePointing`, { state: channelTabs });
          }}
        >
          Channels
        </span>
      </Menu.Item>
      <Menu.Item as="a">About</Menu.Item>
    </Sidebar>
  );
};

export default SidebarExampleVisible;

2. 优化 TabExamplePointing.jsx，兼容无状态传入的情况

增加默认值，避免直接访问location.state为空时报错，同时保留原有渲染逻辑：

import React from "react";
import { Tab } from "semantic-ui-react";
import { useLocation } from "react-router-dom";

const TabExamplePointing = () => {
  const location = useLocation();
  // 设置默认标签，防止无状态传入时访问属性报错
  const tabType = location.state || {
    Tab1: "Default Tab1",
    Tab2: "Default Tab2",
    Tab3: "Default Tab3"
  };

  const panes = [
    {
      menuItem: tabType.Tab1,
      render: () => <Tab.Pane attached={false}>Tab 1 Content</Tab.Pane>
    },
    {
      menuItem: tabType.Tab2,
      render: () => <Tab.Pane attached={false}>Tab 2 Content</Tab.Pane>
    },
    {
      menuItem: tabType.Tab3,
      render: () => <Tab.Pane attached={false}>Tab 3 Content</Tab.Pane>
    }
  ];
  return <Tab menu={{ pointing: true }} panes={panes} />;
};

export default TabExamplePointing;

3. Routing.jsx 无需修改

当前路由配置已正确指向TabExamplePointing组件，保持原有代码即可。

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