React导出Login组件后启动应用页面不显示内容如何解决

你使用的是v6及以上版本的react-router-dom，该版本对路由API做了破坏性变更：Route组件不再支持将待渲染内容放在标签子节点位置，必须通过element属性传入要渲染的组件，否则路由匹配后也不会挂载对应内容。

修改App.js中的Route写法即可，修正后的完整App.js代码：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import './App.css';
import Login from './components/Login';

function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route exact path='/' element={<Login />} />
        </Routes>
      </Router>
    </div>
  );
}

export default App;

如果修改后仍无法正常渲染，可逐一核对以下点：

• 文件名大小写匹配：你代码中引入路径写的是./components/Login，需确认实际组件文件名为Login.js而非全小写的login.js，多数前端打包环境对文件名大小写敏感，大小写不匹配会导致引入的组件值为空
• 入口文件配置正确：确认项目入口文件（通常为src/index.js）已正确引入React、ReactDOM，且正常将App组件挂载到根DOM节点上
• 控制台无报错：打开浏览器开发者工具（F12）查看Console面板，确认不存在红色报错信息阻断代码执行
• 访问路径正确：确认本地开发服务启动后，浏览器访问的地址是http://localhost:端口号/，和你配置的根路径路由匹配

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