為什么在使用反應路由器 v6 鏈接傳遞道具時 location.state 為空？

Question

這是我的 section.js 代碼，我使用 state 來傳遞 props

<Link to="/tesla-clone/order" state={{ model: "model s" }}>
  <LeftButton>
    {leftText}
  </LeftButton>
</Link>

這是我的 order.js，我使用位置來捕捉道具

function Order() {
    const location = useLocation()
    const {model} = location.state
....
<OrderRight>
  <h1>{model}</h1>
  <p>Estimated Delivery: Nov 2022 - Feb 2023</p>
  <Options>
    <p>Purchase Price</p>
    <p>Potential savings</p>
  </Options>
....

在 app.js 中，我在這里定義了路由

<div>
  <Routes>
    <Route path="tesla-clone" element={<Homepage />} />
    <Route path="tesla-clone/order" element={<Order />} />
  </Routes>
</div>

我收到一個錯誤：未捕獲的類型錯誤：無法解構“location.state”的屬性“模型”，因為它為空。 有人可以幫我解決這個問題嗎？ 非常感謝！ 錯誤的圖像

Answer 1

我找到了解決方案！ 我應該寫

const { state } = useLocation()
const { model } = state

它工作得很好。