React项目组件类型无效报错，页面无内容请求技术支持

问题背景 #

按照YouTube教程开发React项目，使用react-router-dom v6、MUI库，控制台抛出多组「组件类型无效」错误，页面无内容输出。相关代码、依赖及错误信息如下：

代码文件 #

App.js

import logo from './logo.svg';
import './App.css';
import React from 'react';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

index.js

import React from 'react';
import ReactDOMClient from 'react-dom/client';
import { Route, BrowserRouter as Router, Routes } from 'react-router-dom';
import './index.css';
import App from './App';
import Header from './components/Header';
import Footer from './components/Footer';

const routing = (
  <Router>
      <Header />
      <Routes>
        <Route exact path="/" component={App} />  
      </Routes>
      <Footer />
  </Router>
);

const root = ReactDOMClient.createRoot(document.getElementById('root'));
root.render(routing);

Header.js

import React from 'react';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import AppBar from '@mui/material/AppBar';
import CssBaseline from '@mui/material/CssBaseline';
import { makeStyles } from '@mui/styles';

const useStyles=makeStyles((theme)=>({
    appBar:{
        borderBottom:`1px solid ${theme.palette.divider}`,
    },
}));
function Header(){
    const classes=useStyles();
    return(
        <React.Fragment>
            <CssBaseline />
            <AppBar position="static"
                color="white"
                elevation={0}
                className={classes.appBar}
                >
                    <Toolbar>
                        <Typography variant="h6" color="inherit" noWrap>
                            BlogmeUp
                        </Typography>
                    </Toolbar>    
            </AppBar>
        </React.Fragment>
    );
}
export default Header;

控制台错误信息 #

• 错误1：React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. 检查index.js第15行。
• 错误2：Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
• 错误3：错误发生在<Location.Provider>组件中（Router/BrowserRouter）。
• 错误4：重复错误2的堆栈信息。

package.json依赖配置 #

{
  "name": "blogapi",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.10.6",
    "@emotion/styled": "^11.10.6",
    "@material-ui/core": "^4.12.4",
    "@mui/material": "^5.11.12",
    "@mui/styles": "^5.12.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.10.0",
    "react-scripts": "^5.0.1",
    "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"
    ]
  }
}

错误原因分析 #

1. react-router-dom v6 API变更：v6版本的Route组件不再支持component属性，需改用element属性传递JSX元素；同时exact属性已被移除，v6默认采用精确匹配。
2. MUI v5样式配置缺失：@mui/styles的makeStyles依赖MUI的ThemeProvider提供主题上下文，未配置时会导致theme对象获取失败，进而引发组件渲染错误。
3. Footer组件未定义：代码中导入了Footer但未提供实现，若文件不存在会导致导入失败。

修复步骤 #

1. 修正react-router-dom路由配置 #

修改index.js中的Route组件，替换component为element，移除exact属性：

import React from 'react';
import ReactDOMClient from 'react-dom/client';
import { Route, BrowserRouter as Router, Routes } from 'react-router-dom';
import './index.css';
import App from './App';
import Header from './components/Header';
import Footer from './components/Footer';

const root = ReactDOMClient.createRoot(document.getElementById('root'));
root.render(
  <Router>
    <Header />
    <Routes>
      <Route path="/" element={<App />} />
    </Routes>
    <Footer />
  </Router>
);

2. 修复MUI样式问题（二选一） #

方案一：添加ThemeProvider

在index.js中引入MUI的主题提供者，为makeStyles提供主题上下文：

import { ThemeProvider, createTheme } from '@mui/material/styles';

const theme = createTheme();

root.render(
  <ThemeProvider theme={theme}>
    <Router>
      <Header />
      <Routes>
        <Route path="/" element={<App />} />
      </Routes>
      <Footer />
    </Router>
  </ThemeProvider>
);

方案二：改用MUI v5 styled API

替换makeStyles为MUI官方推荐的styled方法，无需额外主题配置：

// Header.js
import React from 'react';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import AppBar from '@mui/material/AppBar';
import CssBaseline from '@mui/material/CssBaseline';
import { styled } from '@mui/material/styles';

const StyledAppBar = styled(AppBar)(({ theme }) => ({
  borderBottom: `1px solid ${theme.palette.divider}`,
}));

function Header(){
  return(
    <React.Fragment>
      <CssBaseline />
      <StyledAppBar position="static"
          color="white"
          elevation={0}
          >
              <Toolbar>
                  <Typography variant="h6" color="inherit" noWrap>
                      BlogmeUp
                  </Typography>
              </Toolbar>    
      </StyledAppBar>
    </React.Fragment>
  );
}
export default Header;

3. 补充Footer组件实现 #

创建src/components/Footer.js文件，示例代码：

import React from 'react';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';

function Footer() {
  return (
    <Box sx={{ mt: 'auto', py: 2, textAlign: 'center', backgroundColor: '#f5f5f5' }}>
      <Typography variant="body2" color="text.secondary">
        © 2024 BlogmeUp
      </Typography>
    </Box>
  );
}

export default Footer;

验证结果 #

修改完成后重启项目，控制台错误消失，页面将正常渲染Header导航栏、App默认内容及Footer底部区域。

内容的提问来源于stack exchange，提问作者Chai Yon Xing