React编译无错但localhost:3000仅显示标题无页面内容排查

核心故障点 #

从贴出的代码看，路由和导航栏的3处错误直接导致渲染中断，和依赖版本无关：

• 导航栏存在未注册的路由入口：Navbar 中写了指向 /about 的 NavLink，但 App.js 的路由表完全没有配置 /about 对应的渲染规则，React Router v6 遇到无匹配规则的路径时，<Routes> 块内不会渲染任何内容，直接导致首页挂载失败。
• 注册按钮的导航组件缺失必填参数：导航栏的 <NavBtnLink> 未配置 to 属性，React Router v6 中 NavLink 类组件的 to 属性为必填项，缺失时会直接抛出JS渲染错误，中断整个组件树的渲染，最终呈现白屏效果（仅显示public/index.html中预设的站点标题）。
• Logo跳转使用原生a标签引发布局冲突：Logo跳转用了原生 <a href='/'> 而非路由提供的Link组件，点击时会触发整页重载，打乱前端路由的状态管理逻辑，容易诱发路由匹配异常。
• 冗余无效代码：React Router v6 已移除exact匹配属性，所有路由默认开启精确匹配，首页路由上的exact参数虽不直接触发报错，但属于无意义冗余代码。

修复操作 #

1. 处理无效的About导航链接：如果暂未开发About页面，直接删除Navbar中对应代码块即可：

   <NavLink to="/about" >
       About
   </NavLink>
   

   若需要保留入口，先编写About页面组件，再在App.js的<Routes>块内补全对应路由规则：

   // 顶部先引入组件
   import About from './pages/about';
   // 路由表内添加
   <Route path='/about' element={<About />} />
   

2. 为注册按钮补全跳转路径，修改对应代码为：

   <NavBtn style={register}>
     <NavBtnLink to="/register">Register</NavBtnLink>
   </NavBtn>
   

3. 替换Logo的原生跳转标签，避免整页刷新：
   先在Navbar组件顶部引入路由的Link组件：

   import { Link, NavLink } from 'react-router-dom';
   

   再将原有a标签替换为：

   <Link style={logo} to='/' alt="logo"><img src='logo.png' style={logo}/></Link>
   

4. 删除首页路由上冗余的exact属性，修改为：

   <Route path='/' element={<Home />} />
   

验证 #

所有修改保存后，等待react-scripts热更新完成，清空浏览器缓存刷新localhost:3000即可正常渲染页面，浏览器控制台也不会再出现路由相关报错。

注：当前项目package.json中列出的依赖无版本冲突，react-router-dom@6.2.1和React 18完全适配，不需要做降级处理。

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