Webpack编译成功但React页面无内容问题排查求助

开发博客网站时，编译代码后浏览器显示空白页面，控制台无报错，仅存在多个警告。以下是相关代码及配置：

App.js #

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import MainRoutes  from './routes/MainRoutes';
import AuthRoutes from './routes/AuthRoutes';
import './styles/layout.css';

const App = () =>{
  return (
    <div className="App">
      <Router>
        <AuthRoutes />
        <MainRoutes />
      </Router>
    </div>
  );
}

export default App;

MainRoutes.js #

import React from 'react'
import {Routes, Route} from 'react-router-dom'
import {ScrollToTop} from '../components/shared'
import ProfileScreen from '../screens/Settings/ProfileScreen'
import DetailsScreen from '../screens/Public/DetailsScreen'
import UploadScreen from '../screens/Public/UploadScreen'
import EditScreen from '../screens/Settings/EditScreen'
import UserScreen from '../screens/Public/UserScreen'
import DashboardScreen from '../screens/Settings/DashboardScreen'
import CategoryScreen from '../screens/Public/CategoryScreen'

const MainRoutes = () => {
  return (
    <ScrollToTop>
      <Routes>
        <Route path='/search/:keyword' component={UploadScreen} exact/>
        <Route path='/category/:category' component={UploadScreen} exact/>
        <Route path='/category' component={CategoryScreen} exact/>
        <Route path='/post/:id/edit' component={EditScreen} exact/>
        <Route path='/my_posts' component={DashboardScreen} exact/>
        <Route path='/post/:id' component={DetailsScreen} exact/>
        <Route path='/profile' component={ProfileScreen} exact/>
        <Route path='/user/:id' component={UserScreen} exact/>
        <Route path='/' component={UploadScreen} exact/>
      </Routes>
    </ScrollToTop>
  )
}

export default MainRoutes;

AuthRoutes.js #

import React from 'react'
import {Route, Routes} from 'react-router-dom'
import LoginScreen from '../screens/Auth/LoginScreen'
import SignUpScreen from '../screens/Auth/SignUpScreen'
import ScrollToTop from '../components/shared/ScrollToTop'

const AuthRoutes = () => {
  return (
    <ScrollToTop>
      <Routes>
        <Route path='/login' element={LoginScreen}/>
        <Route path='/signup'element={SignUpScreen}/>

      </Routes>
    </ScrollToTop>
  )
}

export default AuthRoutes;

Package.json #

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@chakra-ui/react": "^2.4.6",
    "@cloudinary/react": "^1.9.0",
    "@cloudinary/url-gen": "^1.8.7",
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@redux-devtools/extension": "^3.2.5",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@tinymce/tinymce-react": "^4.2.0",
    "antd": "^5.1.6",
    "axios": "^1.2.6",
    "bootstrap": "^5.2.3",
    "combine-reducers": "^1.0.0",
    "firebase": "^9.15.0",
    "framer-motion": "^8.0.2",
    "froala-editor": "^4.0.16",
    "jwt-decode": "^3.1.2",
    "moment": "^2.29.4",
    "react": "^18.2.0",
    "react-bootstrap": "^2.7.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.7.1",
    "react-loader-spinner": "^5.3.4",
    "react-quill": "^2.0.0",
    "react-redux": "^8.0.5",
    "react-router-dom": "^6.8.1",
    "react-scripts": "^5.0.1",
    "react-use-googlelogin": "^0.12.5",
    "redux": "^4.2.1",
    "redux-thunk": "^2.4.2",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "css-loader": "^6.7.3"
  }
}

排查建议与解决方案 #

1. 修正React Router v6路由语法
   你使用的是react-router-dom@6.8.1，但MainRoutes.js仍在使用旧版component属性，v6必须改用element属性，且需传入组件实例（如<UploadScreen />而非UploadScreen）。

   • 修正MainRoutes.js路由：

     <Route path='/search/:keyword' element={<UploadScreen />} exact/>
     <Route path='/category/:category' element={<UploadScreen />} exact/>
     <Route path='/category' element={<CategoryScreen />} exact/>
     <Route path='/post/:id/edit' element={<EditScreen />} exact/>
     <Route path='/my_posts' element={<DashboardScreen />} exact/>
     <Route path='/post/:id' element={<DetailsScreen />} exact/>
     <Route path='/profile' element={<ProfileScreen />} exact/>
     <Route path='/user/:id' element={<UserScreen />} exact/>
     <Route path='/' element={<UploadScreen />} exact/>
     

   • 同步修正AuthRoutes.js：

     <Route path='/login' element={<LoginScreen />}/>
     <Route path='/signup' element={<SignUpScreen />}/>
     

2. 合并冲突的Routes组件
   App.js中同时渲染两个包含Routes的组件，会导致路由匹配异常。v6建议将所有路由整合到一个Routes下，比如修改App.js：

   import React from 'react';
   import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
   import {ScrollToTop} from './components/shared'
   // 导入所有页面组件
   import ProfileScreen from './screens/Settings/ProfileScreen'
   import DetailsScreen from './screens/Public/DetailsScreen'
   import UploadScreen from './screens/Public/UploadScreen'
   import EditScreen from './screens/Settings/EditScreen'
   import UserScreen from './screens/Public/UserScreen'
   import DashboardScreen from './screens/Settings/DashboardScreen'
   import CategoryScreen from './screens/Public/CategoryScreen'
   import LoginScreen from './screens/Auth/LoginScreen'
   import SignUpScreen from './screens/Auth/SignUpScreen'
   import './styles/layout.css';
   
   const App = () =>{
     return (
       <div className="App">
         <Router>
           <ScrollToTop>
             <Routes>
               {/* 认证路由 */}
               <Route path='/login' element={<LoginScreen />}/>
               <Route path='/signup' element={<SignUpScreen />}/>
               {/* 主路由 */}
               <Route path='/search/:keyword' element={<UploadScreen />} exact/>
               <Route path='/category/:category' element={<UploadScreen />} exact/>
               <Route path='/category' element={<CategoryScreen />} exact/>
               <Route path='/post/:id/edit' element={<EditScreen />} exact/>
               <Route path='/my_posts' element={<DashboardScreen />} exact/>
               <Route path='/post/:id' element={<DetailsScreen />} exact/>
               <Route path='/profile' element={<ProfileScreen />} exact/>
               <Route path='/user/:id' element={<UserScreen />} exact/>
               <Route path='/' element={<UploadScreen />} exact/>
             </Routes>
           </ScrollToTop>
         </Router>
       </div>
     );
   }
   
   export default App;
   

3. 排查ScrollToTop组件
   临时移除ScrollToTop对路由的包裹，测试页面是否能正常显示，排除该组件异常导致的渲染问题。

4. 处理控制台警告
   逐一解决控制台的警告信息，比如组件导入错误、Hook规则违反等，这些潜在问题可能导致页面无法正常渲染。

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