React Router v6中Link组件to属性传入生成函数不生效问题

这是react-router-dom v6 版本的破坏性变更导致的：

• v5 版本中Link组件的to属性支持传入函数类型，组件内部会自动执行该函数，拿到返回的路径字符串或路径对象做跳转解析
• v6 版本完全移除了to属性接收函数的能力，仅支持传入字符串、路径对象两种类型值

你当前代码直接把generateLinkTo函数引用传给to属性时，v6内部不会执行这个函数获取返回值，会将不匹配类型的传入值做兜底处理，最终解析为默认的/路径，因此渲染出的a标签href始终是首页地址。

直接在传值时手动执行generateLinkTo函数，拿到返回的路径字符串再传给to属性即可：

<Link to={generateLinkTo()} className={`text-decoration-none ${textColor}`}>
  {/* 链接内容 */}
</Link>

由于generateLinkTo依赖的widget是组件state值，组件在state更新触发重渲染时，会重新执行函数拿到最新的对应路径，和你在v5版本中的运行效果完全一致。

补充说明：如果你后续需要实现v5版本中基于当前路由location动态生成目标路径的逻辑，不要在to属性中传函数，可通过useLocation() hook提前获取当前location信息，在组件渲染阶段计算好最终路径后再传给to属性即可。

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