React Router v6中navigate()需调用两次才触发loader问题求助

架构老林

2026-7-29

React Router navigate跳转后loader首次不执行的问题分析与解决

先修正路径语法错误
你的跳转代码存在明显的语法问题：
```
<Dropdown.Item
  onClick={() =>
    navigate(`/blog/1/}`)
  }
>
```
模板字符串末尾多了一个多余的}，导致实际跳转的路径是/blog/1/}，和路由配置的/blog/:id规则不匹配。首次点击时URL虽变化，但并未匹配到目标路由，因此loader不会执行。第二次点击时的异常触发属于浏览器历史栈的偶发行为，并非正常逻辑。
修正路径，去掉多余的}即可：
```
<Dropdown.Item
  onClick={() =>
    navigate(`/blog/1`)
  }
>
```
若需要带尾部斜杠，可写成/blog/1/，确保路径完全符合路由匹配规则。
关于React.StrictMode的说明
开发模式下的StrictMode会重复执行loader、action等函数，但它不会导致loader首次不执行的情况。你的问题核心是路径匹配失败，和StrictMode无关。如果路径修正后，开发环境中loader被执行两次，这是StrictMode的正常验证行为，生产环境会自动恢复为单次执行。
额外验证建议
- 修正路径后，首次点击跳转时观察控制台是否打印params，同时通过React DevTools查看路由匹配状态，确认目标路由是否被正确激活。
- 若问题仍存在，检查是否有其他路由规则优先匹配了跳转后的路径，导致目标路由的loader未触发。