React组件渲染异常：Hero组件替换Nav组件问题求助

• 检查根组件的渲染结构：打开App.js或者项目的入口组件，确认是不是同时渲染了Nav和Hero。比如有没有写成return <Hero />，正确的应该是用Fragment或者容器元素把两个组件包起来，比如return (<><Nav /><Hero /></>)。
• 核对组件的导出与导入：确认Nav组件的导出方式，要是默认导出export default Nav，导入就得是import Nav from './Nav'；要是命名导出export const Nav = ...，导入要写成import { Nav } from './Nav'，别搞混了。
• 排查Hero组件的副作用代码：看看Hero里有没有直接操作DOM的代码，比如document.body.innerHTML = ...，这种会直接替换页面内容，把Nav覆盖掉。另外检查有没有错误的条件渲染逻辑，导致Nav被隐藏。
• 检查路由配置（如果用了React Router）：如果项目用了路由，确认Nav是不是放在路由组件外面的公共布局里，而不是和Hero放在同一个路由规则下。别把路由规则写错，导致只渲染Hero不渲染Nav。
• 排查CSS样式冲突：打开浏览器开发者工具，看看Nav元素是不是还在DOM树里。有时候Hero的样式比如position: fixed; top: 0; left: 0; width: 100%; height: 100%;会把Nav完全挡住，看起来像是被替换了。
• 清理缓存重启服务：停掉当前的开发服务器，重新执行npm start或者yarn start，同时用Ctrl+Shift+R强制刷新浏览器页面，排除缓存导致的异常。

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