在Route组件外部实现React Router路由跳转的方案咨询

我来给你几个可行的解决方案，完美适配你现在的场景——不用把<Panels>塞进每个<Route>，也能让Antd标签页触发路由跳转：

方案1：React Router v6+ 用useNavigate钩子（推荐） #

因为你的<Panels>已经在<Router>组件内部，所以可以直接通过React Router提供的useNavigate钩子手动触发路由跳转，完全不需要嵌套<Link>标签。结合Antd Tabs的onChange事件就能实现需求：

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

const Panels = () => {
  // 获取路由跳转方法
  const navigate = useNavigate();
  // 获取当前路由信息，用于设置标签页激活状态
  const location = useLocation();

  // 根据标签页key映射到对应路由
  const handleTabChange = (key) => {
    switch(key) {
      case 'view':
        navigate('/view');
        break;
      case 'about':
        navigate('/about');
        break;
      default:
        navigate('/');
    }
  };

  // 根据当前路由设置激活的标签页
  const activeKey = location.pathname === '/view' 
    ? 'view' 
    : location.pathname === '/about' 
      ? 'about' 
      : '';

  return (
    <Tabs onChange={handleTabChange} activeKey={activeKey}>
      <Tabs.TabPane tab="View页面" key="view" />
      <Tabs.TabPane tab="About页面" key="about" />
    </Tabs>
  );
};

export default Panels;

方案2：React Router v5 用withRouter高阶组件 #

如果你还在使用React Router v5版本，可以用withRouter这个高阶组件包裹<Panels>，它会把history、location等路由相关props注入到组件中：

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

const Panels = ({ history, location }) => {
  const handleTabChange = (key) => {
    const targetPath = key === 'view' ? '/view' : key === 'about' ? '/about' : '/';
    history.push(targetPath);
  };

  const activeKey = location.pathname === '/view' 
    ? 'view' 
    : location.pathname === '/about' 
      ? 'about' 
      : '';

  return (
    <Tabs onChange={handleTabChange} activeKey={activeKey}>
      <Tabs.TabPane tab="View页面" key="view" />
      <Tabs.TabPane tab="About页面" key="about" />
    </Tabs>
  );
};

// 用withRouter包裹组件，注入路由props
export default withRouter(Panels);

关键说明 #

这两个方案的核心逻辑都是利用Router组件提供的路由上下文——只要你的<Panels>在<Router>内部，不管有没有被<Route>包裹，都能通过钩子或高阶组件拿到路由操作的能力，完全不用把<Panels>重复放到每个<Route>里，完美解决你的痛点。

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