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

Javascript – show components in nested route in react

this is my code why it doesnt show sale componet? i want in the sale component access to both title & id of each book. but after click on link to go to sale nothing happens .how can i handle this issue? thank you for your help!

App.js

<Route path="/" element={<Navigate to="/login" replace />} />
<Route path="/login" element={<Login />} />
<Route path="/dashboard" element={<Layout component={Dashboard} />} />
<Routes>
  <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>
Tags:

2

Answers


  1. 0

    In your App.js, the path for the sale component is set as /books/sale, but in your BookDetail component, the link to the sale component is specified as to="sale", which would result in a relative path of /books/:title/:id/sale.

    // 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>
    Login or Signup to reply.
  2. 0

    You can try like below

    // Inside BookDetail component
    <Link to={`./sale`}>
      <button type="submit" className="btn custome-btn purple-active-ghost w-100">
        Go to Sale
      </button>
    </Link>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search