React路由访问新增Men、Card组件页面空白无报错问题

新增组件渲染空白是Card.js存在JSX语法错误导致的，原有Git拉取的组件符合React语法规范所以能正常渲染，具体错误点：

• JSX中HTML类属性不能使用原生class关键字（和JS自身的class类声明语法冲突），必须替换为className，Card.js和Nav.js中多处用了class写类名
• JSX中style属性接收值必须是JS对象，不能直接写原生HTML的字符串格式，Card.js中style="width: 18rem;"写法不符合React规范
  部分场景下如果项目配置了错误边界、或者控制台开启了日志过滤，这类语法错误不会抛出明显提示，只会表现为对应组件不渲染、页面空白。

1. 修正Card.js语法，替换为以下正确代码：

import React from 'react'

export default function Card() {
  return (
    <div className="card" style={{width: '18rem'}}>
      <img src="..." className="card-img-top" alt="..."/>
      <div className="card-body">
        <h5 className="card-title">Card title</h5>
        <p className="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" className="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  )
}

2. 修正Nav.js的语法问题：把最外层容器的class="container-fluid"改为className="container-fluid"
3. 保存文件后刷新页面，Card组件和依赖Card的Men组件即可正常渲染。如果后续需要使用Bootstrap的下拉交互功能，记得在项目入口正确引入Bootstrap的JS依赖，否则导航栏的产品下拉菜单无法正常展开。

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