react-router-dom从v5升级到v6后路由传递state为null如何解决

问题原因 #

react-router-dom v6 调整了路由状态的传递规则，不再支持将state参数嵌套在Link组件的to属性对象中，需要将state作为独立属性传入Link组件。

修复步骤 #

只需要修改Home.js中Link组件的写法即可：

1. 把原to属性中的路径单独提取为字符串传给to
2. 把state单独作为Link的属性传入

修改后的Link代码如下：

<Link 
  className="link-details"
  to={`/view-details/${covidData.id}`}
  state={{ covidsData: covidData }}
>
  <Button style={{marginLeft: '0.5em', height:'1.8em'}} variant="contained">View</Button>
</Link>

可选优化 #

建议在ViewDetails.js中增加空值判断，避免用户直接访问详情页路由（没有从首页点击跳转，没有携带state）时报错，修改示例：

const ViewDetails = () => {
  const { state } = useLocation();
  // 增加state不存在的兜底逻辑
  if (!state?.covidsData) {
    return <div>
      <Typography variant="h1">数据不存在</Typography>
      <Link to="/"><Button variant="contained">返回首页</Button></Link>
    </div>
  }
  // 原有渲染逻辑不变
  return (
    // 原有代码保持不变
  )
}

你现有App.js的v6写法是正确的，无需修改，修改完Link的传参方式后即可正常获取state中的数据。

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