React动态路由页面空白问题：参数可获取但HTML不渲染

开发React店铺商品查看应用时，配置了动态路由:number以获取店铺ID并渲染对应商品。当前访问如/stores/123路径时，ItemsMap组件能正常打印出路由参数number，但页面仅显示空白，组件的HTML内容未渲染。尝试在StoresPreview组件中添加Outlet也未解决问题。

问题原因 #

核心问题在于父路由组件未包含<Outlet />：

• App组件中，/路径的路由将Navbar作为父路由元素，所有子路由（/stores/*、/signin等）的内容都需要通过Navbar中的<Outlet />来渲染。如果Navbar组件没有添加<Outlet />，子路由的组件内容就无法显示在页面上。
• StoresPreview是StoresPage的index路由组件，和:number路由是同级关系，并非父路由，因此在StoresPreview中添加Outlet没有意义，不会影响:number路由的渲染。

解决方案 #

1. 在Navbar组件中添加<Outlet />
   确保父路由的组件能渲染子路由的内容，修改Navbar组件：

   import React from "react";
   import { Outlet } from "react-router-dom";
   // 其他导航相关导入
   
   const Navbar = () => {
     return (
       <>
         {/* 导航栏原有内容（如菜单、链接等） */}
         <nav>
           {/* 示例导航链接 */}
           <a href="/">首页</a>
           <a href="/stores">店铺列表</a>
         </nav>
         {/* 添加Outlet，用于渲染子路由的内容 */}
         <Outlet />
       </>
     );
   };
   
   export default Navbar;
   

2. 确认路由层级匹配正确
   当前的路由配置逻辑是正确的：

   • App中的/stores/*匹配所有/stores开头的路径，并交由StoresPage处理
   • StoresPage内部的Routes分别处理默认首页（StoresPreview）和动态路由（:number对应ItemsMap）

   需确保访问路径正确对应，比如查看ID为123的店铺商品，需访问/stores/123，此时StoresPage会匹配:number路由，渲染ItemsMap组件。

验证修改 #

完成上述修改后，再次访问/stores/123，页面应该会正常显示the id is 123的标题内容，同时控制台能正确打印出123参数。

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