在react中显示嵌套路由中的组件

Question

这是我的代码，为什么它不显示销售组件？我想在销售组件中访问每本书的标题和 ID。但点击链接进行销售后没有任何反应。我该如何处理这个问题？谢谢你的帮助！

App.js

<Route path="/" element={<Navigate to="/login" replace />} />
<Route path="/login" element={<Login />} />
<Route path="/dashboard" element={<Layout component={Dashboard} />} />
<Route path="books">
  {/* books */}
 <Route index  element={<Layout component={Dashboard} />}/>
 {/* /books/:title/:id" */}
 <Route path=":title/:id">
   <Route index element={<Layout component={BookDetail} />} />
 {/* /books/:title/:id" */}
 <Route path="sale" element={<Layout component={SaleStore} />} />
  </Route>
</Route>

Dashboard

{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

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>

Answer 1

在您的 App.js 中，销售组件的路径设置为 /books/sale，但在 BookDetail 组件中，销售组件的链接指定为 to="sale"，这将导致相对路径为/书籍/：标题/：id/销售。

// App.js

<Route path="books">
  <Route path=":title/:id">
    <Route index element={<Layout component={BookDetail} />} />
    <Route path="sale" element={<Layout component={SaleStore} />} />
  </Route>
</Route>

// BookDetail.js

<Link to={`sale`}>
  <button type="submit" className="btn custome-btn purple-active-ghost w-100">
    go to sale
  </button>
</Link>