Question 319280 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How extract id from react router with useparams

this is my code why it shows id undefined? i want in the sale component access to both title & id of each book but id is undefined.how can i show the value of id in the Sale component? thank you for your help!
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
Tags:

2

Answers


  1. 0

    It looks like you have a route for Sale that includes both :booktitle and :id parameters:

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

    In your Link component in the BookDetails component, you are correctly constructing the URL:

    <Link to={`/books/${encodeURIComponent(booktitle)}/sale/${id}`}>
  <button type="submit" className="btn custome-btn purple-active-ghost w-100">
    go to sale
  </button>
</Link>

    However, when you use useParams in the Sale component, it seems that you might not be providing the id parameter correctly in the URL.

    Make sure that when you navigate to the Sale component, you are providing both :booktitle and :id in the URL. For example, if you have a book with title "example" and ID "123", the URL should look like:

    /books/example/sale/123

    If the URL is correct, the useParams in the Sale component should correctly extract both booktitle and id. If it’s still showing undefined, double-check the URL and make sure you are providing the parameters correctly. Additionally, you may want to log the entire params object to see what is being extracted:

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

    This way, you can inspect the entire params object and see if the parameters are being correctly parsed from the URL.

    Login or Signup to reply.
  2. 0

    It would appear that the BookDetails component has the undefined id param and passes it through to the link used to navigate to the sales page.

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

    I’d suggest a routing pattern where the book id is used earlier in the route path.

    Exmaple:

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

    Update the dashboard to link to a detail page with title and 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>
)}

    Now both title and id will be defined int he details component. Link to the sales page.

    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>

    Now the book title and id should also be available in the sale component.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search