Javascript 如何使用useparams从react路由中提取id

这就是我的代码为什么它显示ID未定义？我希望在销售组件中访问每本书的标题和ID，但ID未定义.如何在销售组件中显示ID的值？谢谢你的帮助! App.js个

  <Route path="books" element={<Dashboard />} />
  <Route path="books/:booktitle" element={<BookDetails />} />
  <Route path="books/:booktitle/sale/:id" element={<SaleStore />} />

Dashbaord:个

 {books.map((book) => (
                  <div className="col" key={book.id}>
                    <div className="card h-100" >
                      <div className="card-img-top pb-5 mb-5">
                      </div>
                      <div className="card-body">
                        <Link to={`/books/${encodeURIComponent(book.title)}`}>
                          <button type="submit" className="btn custome-btn purple-active-ghost w-100">
                            {book.title}
                          </button>
                        </Link>
// rest of code

Detail:

  const { booktitle, id } = useParams();
  console.log("book Title:", booktitle);
  console.log("book Id:", id);
                     <Link to={`/books/${encodeURIComponent(booktitle)}/sale/${id}`}>
                          <button type="submit" className="btn custome-btn purple-active-ghost w-100">
                              go to sale
                          </button>
                        </Link>

Sale:

  const { booktitle, id } = useParams();
  console.log("book Title:", booktitle);
  console.log("book Id:",id);
  
        <p>{booktitle}</p> // 
      <p>{id}</p> // undefiend