React中路由跳转至同一URL时，页面加载如何指定打开对应手风琴

方法一：利用路由跳转的state传递标识（推荐，URL无额外参数） #

修改按钮组件的跳转逻辑，在history.push时附带state参数，指定要打开的手风琴序号：

<button onClick={() => history.push('/user/25', { accordion: 1 })}>
  Navigate to 1st accordion
</button>

<button onClick={() => history.push('/user/25', { accordion: 2 })}>
  Navigate to 2nd accordion
</button>

然后在User组件中，通过useLocation钩子获取路由state，再结合useEffect初始化或更新手风琴的展开状态：

import { useLocation } from 'react-router-dom';

const User = () => {
  const [expanded, setExpanded] = useState(1);
  const location = useLocation();

  useEffect(() => {
    // 从路由state中获取指定的手风琴序号，没有则默认1
    const targetAccordion = location.state?.accordion || 1;
    setExpanded(targetAccordion);
  }, [location.state]);

  // 手风琴渲染逻辑...
};

方法二：利用URL查询参数传递标识（URL可见参数） #

如果需要在URL中体现要打开的手风琴，可以给跳转地址添加查询参数：

<button onClick={() => history.push('/user/25?accordion=1')}>
  Navigate to 1st accordion
</button>

<button onClick={() => history.push('/user/25?accordion=2')}>
  Navigate to 2nd accordion
</button>

在User组件中，解析URL的查询参数来设置展开状态：

import { useLocation } from 'react-router-dom';

const User = () => {
  const [expanded, setExpanded] = useState(1);
  const location = useLocation();

  useEffect(() => {
    const searchParams = new URLSearchParams(location.search);
    const targetAccordion = parseInt(searchParams.get('accordion')) || 1;
    setExpanded(targetAccordion);
  }, [location.search]);

  // 手风琴渲染逻辑...
};

注意事项 #

• 两种方法都能满足需求：方法一更隐蔽（参数不显示在URL），方法二更直观（用户能从URL看到当前打开的手风琴），可根据场景选择。
• 确保User组件处于路由上下文内（当前已通过Route渲染，满足条件），才能正常使用useLocation钩子。

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