react-router-dom v6路由跳转后React组件不渲染显示空白如何解决？

问题原因 #

核心是两种可能性最高，你可以按顺序排查： #

第一种：组件导出导入方式不匹配 #

如果导入的页面组件实际为undefined，React渲染时不会抛出错误，只会渲染空白内容，你可以核对以下规则：

• 如果组件是命名导出（比如你贴的export const PlayerPage = () => {}），导入时必须带大括号：import { PlayerPage } from './Views/PlayerPage'
• 如果组件是默认导出（比如你改后的export default PlayerCreatePage），导入时不能带大括号：import PlayerCreatePage from './Views/PlayerCreatePage'

你修改PlayerCreatePage为默认导出后可以正常渲染，说明你同步调整了该组件的导入语句匹配默认导出，其他未调整的组件大概率存在导出导入不匹配的问题。
你可以临时把某条路由的element属性直接写死为内置DOM元素，验证路由配置是否正常：

<Route path="Player" element={<h2>临时测试内容</h2>} />

如果访问/Player能看到这段测试内容，就完全排除路由配置问题，100%是组件导入导出的问题。 #

第二种：样式遮挡 #

你的Header组件如果使用了position: fixed、position: absolute这类脱离文档流的定位，会遮挡后续的路由内容。首页能正常显示是因为HomePage自带了上外边距，其他页面没有对应外边距就会被Header挡住，看起来是空白。
验证方法：打开浏览器开发者工具，查看Elements面板中<Routes>节点下是否有对应的页面组件DOM，如果有就是被遮挡了，给路由外层容器加对应高度的上内边距/外边距即可。 #

其他小概率问题 #

react-router-dom v6默认开启路由大小写敏感，如果你路由配置写的是path="player"，访问/Player就无法匹配，会走到404路由，如果此时404组件也存在导入导出不匹配的问题，就会显示空白。

解决方法 #

• 统一所有页面组件的导出方式，要么全用命名导出、导入时带大括号，要么全用默认导出、导入时不带大括号，避免混用出错。
• 确认所有页面文件的存放路径、文件名大小写和导入语句中的路径、大小写完全一致。
• 给路由外层容器添加足够的上内边距，避免被Header遮挡。

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