React嵌套路由内容不显示求助：Admin子路由失效排查

你的问题出在Admin组件内的路由路径写法错误，导致子路由无法正确匹配。

问题原因 #

入口文件中配置的/admin/*已经将/admin开头的所有路径指向Admin组件，此时Admin组件内的路由应该基于相对路径匹配（即匹配/admin之后的子路径部分），而你写的是绝对路径/admin/product、/admin/offers，这会导致内部路由无法正确匹配当前的路由上下文。

修复方案 #

将Admin组件内的路由路径改为相对路径，去掉前缀/admin：

修改后的Admin.js代码：

<div>
  <ASideMenuNav />
  <Routes>
    <Route path='product' element={<AProductsInfo />} />
    <Route path='offers' element={<AProductOffers />} />
  </Routes>
</div>

这样当URL为/admin/product时，入口路由匹配/admin/*加载Admin组件，Admin内部的路由会匹配product（对应/admin之后的部分），从而正确渲染<AProductsInfo />组件。

补充说明 #

如果需要支持更灵活的子路由，也可以在Admin组件内添加一个匹配所有子路径的路由作为兜底，比如：

<Route path='*' element={<NotFound />} />

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