react-router-dom@5.3.0中<Link>两种to写法为何一正常一失效？

在使用react-router-dom@5.3.0的React项目中，两种Link写法表现不一致：

• <Link to={PATH}>写法可正常实现页面跳转
• <Link to={{pathname:PATH}}>写法点击后页面显示空白，但刷新空白页或直接在地址栏输入路径，页面能正常显示

相关代码示例：

<Link to={`/chat_detail?name=${user?.name}&room=TestRoom`}>
  <div>TestBtn1</div>
</Link>

<Link to={{ pathname:`/chat_detail?name=${user?.name}&room=TestRoom` }}>
  <div>TestBtn2</div>
</Link>

这不是react-router-dom的bug，而是对对象形式to属性的用法有误。

当使用对象类型的to参数时，react-router会将pathname、search、hash等字段分开解析：

• pathname仅用于指定路由的路径部分（不包含查询参数）
• 查询参数需要单独放在search字段中

如果直接把带?的完整URL字符串赋值给pathname，react-router会将整个字符串识别为路径的一部分（比如把/chat_detail?name=xxx&room=TestRoom当作完整路径），而你的路由配置中大概率没有匹配这个特殊路径的规则，因此跳转后找不到对应组件，页面显示空白。

而直接传递字符串形式的to参数时，react-router会自动帮你拆分路径和查询参数，所以能正确匹配路由。

正确的对象写法应该是：

<Link to={{ 
  pathname: '/chat_detail',
  search: `?name=${user?.name}&room=TestRoom`
}}>
  <div>TestBtn2</div>
</Link>

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