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 中有搜索參數。