React实现点击按钮跳转到另一页面指定标签页的方法

要实现点击按钮直接跳转到/page页面的Tab2组件，只需要通过URL查询参数传递标签页状态，再在目标页面读取参数并切换标签即可，具体步骤如下：

1. 修改跳转按钮的代码 #

在跳转时给目标URL添加查询参数（比如?tab=2），用来标识要打开的是Tab2：

<button onClick={() => history.push("/page?tab=2")}> Redirect to Tab2 </button>

2. 更新/page组件的逻辑 #

在/page组件中，通过useLocation获取URL参数，并在组件初始化或参数变化时切换标签页状态：

import { useLocation, useEffect } from 'react';
import { useState } from 'react';

const PageComponent = () => {
  const location = useLocation();
  const [toggle, setToggle] = useState<boolean>(true);

  useEffect(() => {
    // 解析URL中的查询参数
    const params = new URLSearchParams(location.search);
    const targetTab = params.get('tab');
    
    // 根据参数切换标签：tab=2时显示Tab2（对应toggle=false）
    setToggle(targetTab !== '2');
  }, [location.search]); // 监听URL参数变化，确保参数更新时同步切换标签

  return (
    <div>{toggle ? <Tab1Container /> : <Tab2Container />}</div>
  );
};

export default PageComponent;

补充说明 #

• 这种方式不仅支持按钮跳转，用户直接访问/page?tab=2也能直接打开Tab2；
• 如果后续需要扩展更多标签页，只需要调整参数值（比如?tab=3）和对应的状态判断逻辑即可。

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