react-router-dom v6 <Link> 当某个对象传递给状态时重新加载页面

Question

我目前正在使用 <Link to={"/user/" + user.id} state={{ user }}>...</Link> 到 link 到用户个人资料页面。 我通过状态提供用户对象。

这是有问题的路线：

<Route
  path="user/:id"
  element={<SelectedUserTab />}
/>

用户对象由多个嵌套对象组成。 当用户在传递到 <Link> 状态的用户对象中有以下对象时，<Link> 不会停留在应用程序中并显示页面，而是像<a> 并且 /user/:id 页面是“硬加载”的。（重新加载整个应用程序页面，而不是只显示新页面）

timeEvents: [
  {
    start: moment("2022-03-09", "YYYY-MM-DD"),
    end: moment("2022-03-10", "YYYY-MM-DD"),
    type: "unavailable",
  },
  {
    start: moment("2022-03-14", "YYYY-MM-DD"),
    end: moment("2022-03-15", "YYYY-MM-DD"),
    type: "unavailable",
  },
],

此对象中是否有某些东西可能导致 <Link> 出现异常或导致它“硬加载”页面的错误。

Answer 1

已解决

✔️ 我的问题是 Moment.js 代码作为对象的一部分存在。

用时间戳替换 start 和 end 参数已经解决了我的问题。到 moment() 的转换发生在代码的后面，无论如何这是个好主意。使用 JavaScript Date() 函数也可以。

timeEvents: [
  {
    start: 1646434800,
    end: 1646521200,
    type: "unavailable",
  },
],

react-router-dom v6 <Link> 当某个对象传递给状态时重新加载页面

react-router-dom v6 <Link> reloads page when certain object is passed to state

momentjs

reactjs

react-router-dom

已解决