React router Link with 'to' prop as object 没有渲染正确的组件

Question

我有 react-router v5 的简单应用程序。 在 App 组件中，我有这样的开关：

<Switch>
  <Route path="/post">
    <Post />
  </Route>
  <Route path="*">
    <Error />
  </Route>
</Switch>

在其他组件中，我有这样的路径链接：

<Link to={{ pathname: `/post?id=${message.id}`, state: { message } }}>text</Link>

现在，错误组件仅从 useLocation() 挂钩记录路径名和 state，Post 组件在 HTML 标记中显示路径名。

当我单击该链接时，呈现的组件是“错误”，它 console.log 正确的路径名（“.post?id=123”），并且它记录了正确的 state。 浏览器中的地址正确，但 Post 组件未呈现。 当我刷新浏览器时，会呈现正确的组件。 我的意思是当我在 post?id=123 上刷新时，会呈现“Post”，但是当我尝试单击指向“post?id=123”的链接时，会呈现“Error”。 如果我在没有 state 的情况下使用 <Link to={ /post?id=${message.id} />，则路由工作正常。

这是codesanbox ，似乎问题出在这部分：to={{pathname: '/post?id=${message.id}, state: {message}}，当我删除它时？id=${...}工作正常。 但我仍然希望有这个 id。

Answer 1

使用 object 作为 'to' 参数时，似乎我不应该使用查询字符串。 如果有人需要包含查询字符串，'to' object 中有搜索参数。