javascript React路由器dom 6.8.1嵌套路由

zu0ti5jz  于 2023-02-28  发布在  Java
关注(0)|答案(2)|浏览(155)

我做错了什么?为什么它不转到"/block/:blockNumber/transactions"页,不断地点击"/block/:blockNumber"页。
我尝试了不同的方法,但我不明白为什么它没有转到正确的页面

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

sz81bmfz1#

你可以这样试试

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

这是因为你没有在你的父路由后使用 。使用“”定义了所有以“block/:blockNumber”开头的路由将转到它定义的子路由。

e4yzc0pl

e4yzc0pl2#

如果BlockPage组件被认为是一个布局路由组件,那么它必须为嵌套路由呈现一个Outlet组件,以便将其内容呈现到其中,就像Layout组件一样。
示例:

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>

如果BlockPage组件***不***应该是布局布线组件,即,它应该呈现在它自己的布线上,则BlockTransactionsPage布线应该取消嵌套。

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

相关问题