Question 73768 in Reactjs Question posted in
The new location for the React Documentation can be found here.

react router dom 6.8.1 nested routes – Reactjs

What am I doing wrong?
Why doesn’t it go to the page "/block/:blockNumber/transactions" constantly hits the page "/block/:blockNumber".

I tried it in different ways, but I don’t understand why it doesn’t go to the right page

<Route element={<Layout />}>
  <Route path={RoutesEnum.root} element={<HomePage />} />
  <Route
    {...breadcrumbs.txPage}
    path={'transaction/:txHash'}
    element={<TransactionPage />}
  />
  <Route
    {...breadcrumbs.blockPage}
    path={'block/:blockNumber'}
    element={<BlockPage />}
  >
    <Route
      {...breadcrumbs.blockTransactionsPage}
      path={'transactions'}
      element={<BlockTransactionsPage />}
    />
  </Route>
  <Route
    {...breadcrumbs.addressPage}
    path={'address/:address'}
    element={<AddressPage />}
  />
  <Route path={'transactions'} element={<TransactionsPage />} />
  <Route path={'blocks'} element={<BlocksPage />} />
</Route>
Tags:

2

Answers


  1. 0

    You can try like this

    <Route {...breadcrumbs.blockPage} path={'block/:blockNumber/*'} >
    <Route {...breadcrumbs.blockTransactionsPage} path={'transactions'}  element={<BlockTransactionsPage />} />
 <Route {...breadcrumbs.blockTransactionsPage} path=''  element={<BlockPage />} />
  </Route>

    Its happening because you are not using * after your parent route. Using "*" defines that all routes that are starting with "block/:blockNumber" will go to its defined children.

    Login or Signup to reply.
  2. 0

    If the BlockPage component is supposed to be a layout route component then it necessarily needs to render an Outlet component for nested routes to render their content into, just like the Layout component.

    Example:

    const BlockPage = () => {
  ...

  return (
    ... BlockPage UI ...

    <Outlet /> // <-- nested routes render element content here
    ...
  );
};

    <Route element={<Layout />}>
  <Route path={RoutesEnum.root} element={<HomePage />} />
  <Route
    {...breadcrumbs.txPage}
    path="transaction/:txHash"
    element={<TransactionPage />}
  />
  <Route
    {...breadcrumbs.blockPage}
    path="block/:blockNumber" // <-- "/block/:blockNumber"
    element={<BlockPage />}
  >
    <Route
      {...breadcrumbs.blockTransactionsPage}
      path="transactions"     // <-- "/block/:blockNumber/transactions"
      element={<BlockTransactionsPage />}
    />
  </Route>
  <Route
    {...breadcrumbs.addressPage}
    path="address/:address"
    element={<AddressPage />}
  />
  <Route path="transactions" element={<TransactionsPage />} />
  <Route path="blocks" element={<BlocksPage />} />
</Route>

    If the BlockPage component is not supposed to be a layout route component, i.e. it should be rendered on it’s own route, then the BlockTransactionsPage route should be unnested.

    <Route element={<Layout />}>
  <Route path={RoutesEnum.root} element={<HomePage />} />
  <Route
    {...breadcrumbs.txPage}
    path="transaction/:txHash"
    element={<TransactionPage />}
  />
  <Route path="block/:blockNumber">
    <Route
      {...breadcrumbs.blockPage}
      index               // <-- "/block/:blockNumber"
      element={<BlockPage />}
    />
    <Route
      {...breadcrumbs.blockTransactionsPage}
      path="transactions" // <-- "/block/:blockNumber/transactions"
      element={<BlockTransactionsPage />}
    />
  </Route>
  <Route
    {...breadcrumbs.addressPage}
    path="address/:address"
    element={<AddressPage />}
  />
  <Route path="transactions" element={<TransactionsPage />} />
  <Route path="blocks" element={<BlocksPage />} />
</Route>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search