Why location.state is null when using react router v6 link to pass props?

Question

Here is my section.js code, I used state to pass props

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

Here is my order.js, I used location to catch the props

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>
....

In the app.js, I defined route here

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

I got an error: Uncaught TypeError: Cannot destructure property 'model' of 'location.state' as it is null. Can somebody help me with this problem? Thanks a lot! image of the error

Answer 1

I found the solution! I should write

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

It works pretty well.