React JS组件不显示：已检查组件名大写、className使用仍无效

按优先级依次排查：

• React Router版本不兼容
  你代码中使用的Switch是react-router-dom v5版本的API，若项目安装的是v6及以上版本，该API已被废弃，会导致所有路由规则失效、组件无法渲染。
  解决方案：要么回退到v5版本，执行命令npm install react-router-dom@5.3.0；要么适配v6语法，将Switch替换为Routes，每个Route通过element属性传入渲染组件。
• 路由匹配顺序错误
  Switch遵循从上到下的优先匹配逻辑，你当前将动态参数路由/user/:userId放在了/user/add前面，访问/user/add时会优先命中动态路由，将add识别为userId参数，不会触发NewUser组件的渲染。
  解决方案：将所有无参数的具体路由，放在同前缀的动态参数路由之前，比如把/user/add对应的Route块移到/user/:userId的Route块上方。
• 组件引入路径错误
  确认NewUser组件的实际存放路径与App.js中的引入路径完全匹配：
  1. 路径是否为src/pages/newUser/NewUser.js
  2. 文件名大小写是否完全一致，Windows环境不区分大小写，打包或部署到Linux系统时会出现找不到文件的问题
• 样式遮挡问题
  按F12打开浏览器开发者工具的「元素」面板，搜索newUser类名，若能找到对应DOM节点，说明组件已成功渲染，只是被Topbar遮挡。大概率是Topbar使用了fixed/absolute定位，没有给下方容器留出高度，给.container添加等于Topbar高度的margin-top即可。
• 控制台报错排查
  打开开发者工具的「控制台」面板，检查红色报错：
  1. 若报axios未定义，执行npm install axios安装依赖即可
  2. 若报组件未定义，检查对应组件的export和import语法是否正确

额外补充：你的NewUser组件中form标签未绑定onSubmit事件，提交表单时不会触发你写的提交逻辑，给form标签补上onSubmit={this.onSubmit}即可正常提交。

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