React Router中如何用Link串联操作？点击前先设Context可行吗？

当然可以实现！你遇到的问题其实是React状态更新的异步特性，加上React Router的Link组件会优先触发默认的路由跳转行为，导致你的setTagContext还没完成更新，路由就已经跳走了——这就是为什么看起来两者是并发执行的。

下面给你两种靠谱的解决方案，按需选择：

方案一：阻止Link默认行为，手动控制跳转 #

这是最直接的方式，我们先阻止Link的默认跳转，先更新Context，再手动调用路由跳转：

首先导入useNavigate钩子，然后修改你的点击逻辑：

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

// 组件内部
const navigate = useNavigate();

// 渲染列表部分
{ myTags && myTags.map(tag => (
  <li key={tag}>
    <Link 
      onClick={(e) => {
        e.preventDefault(); // 阻止Link的默认跳转行为
        setTagContext(tag); // 先更新Context
        navigate(`/filter/${tag}`); // 再手动触发路由跳转
      }}
      to={`/filter/${tag}`} {/* to属性这里可以保留，用来做路由高亮等功能 */}
    >
      {tag}
    </Link>
  </li>
))}

这里注意我们直接用循环里的tag作为跳转参数，而不是tagContext——因为setTagContext是异步的，更新后的tagContext不会立刻生效，用当前循环的tag更准确。

方案二：用useEffect监听Context变化，自动跳转 #

如果你希望把状态更新和路由跳转逻辑分开，可以用useEffect监听tagContext的变化，当它更新时自动触发跳转：

import { useNavigate, useEffect } from 'react-router-dom';
// 假设你已经通过自定义Hook获取了Context的状态和更新方法
const { tagContext, setTagContext } = useTagContext();

const navigate = useNavigate();

// 监听tagContext变化，更新时跳转
useEffect(() => {
  // 加个判断，避免组件初始化时就触发跳转
  if (tagContext) {
    navigate(`/filter/${tagContext}`);
  }
}, [tagContext, navigate]);

// 渲染部分换成普通按钮，只负责更新Context
{ myTags && myTags.map(tag => (
  <li key={tag}>
    <button onClick={() => setTagContext(tag)}>
      {tag}
    </button>
  </li>
))}

这种方式的好处是逻辑分离，点击只负责更新状态，路由跳转由状态变化驱动，但要注意处理初始状态的情况，防止组件一加载就跳转到路由。

为什么原来的代码不行？ #

Link的默认跳转是同步执行的，而React的状态更新（包括Context的更新）是异步的——当你点击Link时，路由跳转已经开始了，但tagContext的更新还在队列里等待执行，所以跳转后的页面拿到的还是旧的Context值。而onMouseOver能工作，是因为鼠标悬停时就提前触发了setTagContext，等你点击时Context已经更新完成了，但这显然不是理想的交互方式。

推荐优先用方案一，更符合点击触发的直观逻辑，代码也更简洁。

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