这就是我的代码为什么它显示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

推荐答案

BookDetails组件似乎具有未定义的id参数,并将其传递到用于导航到Sales页面的链接.

<Route
  path="books/:booktitle" // <-- no id param!
  element={<BookDetails />}
/>
const { booktitle, id } = useParams();
console.log("book Title:", booktitle);
console.log("book Id:", id); // <-- undefined

...

<Link
  to={`/books/${encodeURIComponent(booktitle)}/sale/${id}`} // <-- undefined id!
>
  ...
</Link>

我建议一种路由模式,其中图书ID在路由路径中的前面使用.

例如:

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

更新仪表板以链接到标题为100 id的详细页.

{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={`${book.title}/${book.id}`}> // "/books/:title/:id"
        <button type="submit" className="btn custome-btn purple-active-ghost w-100">
          {book.title}
        </button>
      </Link>
    </div>
  </div>
)}

现在将在Detail组件中定义titleid.指向销售页面的链接.

const { title, id } = useParams();
console.log("book Title:", title);
console.log("book Id:", id);

...

<Link to="sale"> // "/books/:title/:id/sale"
  <button type="submit" className="btn custome-btn purple-active-ghost w-100">
    go to sale
  </button>
</Link>

现在,图书titleid也应该在销售组件中可用.

Javascript相关问答推荐

如何将连续的十六进制字符串拆分为以空间分隔的十六进制块,每个十六进制块包含32个二元组?

调用removeEvents不起作用

Angular material 拖放堆叠的牌副,悬停时自动展开&

切换时排序对象数组,切换不起作用

当试图显示小部件时,使用者会出现JavaScript错误.

空的结果抓取网站与Fetch和Cheerio

将本机导航路由react 到导航栏中未列出的屏幕?

屏幕右侧屏障上的产卵点""

无法从NextJS组件传递函数作为参数'

与svg相反;S getPointAtLength(D)-我想要getLengthAtPoint(x,y)

我正在试着做一个TicTacToe Ai来和我玩.但是,我试着在第一个方块被点击时出现一个X,然后在第二个方块之后出现一个O

FireBase FiRestore安全规则-嵌套对象的MapDiff

如何将字符串拆分成单词并跟踪每个单词的索引(在原始字符串中)?

rxjs在每次迭代后更新数组的可观察值

我如何才能获得价值观察家&对象&S的价值?

每隔一行文本段落进行镜像(Boustrophedon)

Reaction-在同一页内滚动导航(下拉菜单)

暂停后只有一次旋转JS

如何从嵌套的json中获取最大值

阻止Electron 打开多个应用程序实例