React Router DOM 6.8.1嵌套路由问题：无法跳转至指定子路由

你的嵌套路由配置逻辑本身没有问题，但无法匹配到/block/:blockNumber/transactions路径的核心原因是：父路由组件BlockPage中缺少<Outlet />组件。

在React Router v6的嵌套路由机制里，子路由的内容需要通过父路由组件中的<Outlet />来渲染，否则请求只会停留在父路由页面，不会加载子路由的组件。

解决步骤 #

1. 在BlockPage组件中导入并渲染Outlet
   打开BlockPage组件文件，添加如下代码：

   import { Outlet } from 'react-router-dom';
   
   function BlockPage() {
     // 组件原有逻辑代码
     return (
       <div className="block-page-container">
         {/* 父页面的原有内容，比如区块基本信息 */}
         <div className="block-basic-info">...</div>
         {/* 子路由内容将在这里渲染 */}
         <Outlet />
       </div>
     );
   }
   

2. 验证跳转路径
   确保跳转时使用正确的路径格式，比如通过<Link>或useNavigate：

   import { Link } from 'react-router-dom';
   
   // 在BlockPage内部跳转至交易列表
   <Link to={`/block/${blockNumber}/transactions`}>查看该区块交易</Link>
   

额外检查点 #

• 确认breadcrumbs.blockTransactionsPage中的配置没有覆盖path属性，避免子路由路径被意外修改
• 检查是否有其他路由规则优先级过高，提前匹配了/block/:blockNumber/transactions路径（从当前代码看不存在这个问题）

内容的提问来源于stack exchange，提问作者jackkru69