React路由配置后组件内容无法渲染问题求助

首次使用React开发前端，引入react-router-dom配置路由后，页面无法正确渲染组件内容，仅能显示基础HTML标签，组件函数返回的JSX内容无法加载。以下是相关代码，需排查组件调用是否有误，实现路由对应组件正常渲染。

相关代码 #

App.js #

import './App.css';
import React from 'react';
import { Route, Routes } from "react-router-dom";
import homePage from './Pages/home';
import loginPage from './Pages/login';
import galleryPage from './Pages/gallery';

function App() {
  return (
    <>
      <Routes>
        <Route path='/' exact element={<homePage />}/>
        <Route path='/login' element={<loginPage />}/>
        <Route path='/gallery' element={<galleryPage />}/>
        <Route path='/dev' element={<test />}></Route>
      </Routes>
    </>
  );
}

export default App;

index.js #

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

reportWebVitals();

home.js #

import Navbar from "../Components/Navigation/Navbar";
import Calendartsc from "../Components/Calendar/calendar";
import Events from "../Components/Events/Events";
import React from "react";
import '../index.css';
import './home.css'

let inhalt = "Temporary test content"

function homePage() {
  return (
    <>
      <div className="App">
        <title>Vereinswebsite</title>
        <Navbar />
        <div className='card'>
          <h2>Wilkommen</h2>
          <div className="flex-container">
            {inhalt}
          </div>
          <div className="flex-container">
            <div className='flex-child magenta'>
              <div className='card'>
                &lt;Calendartsc /&gt;
              </div>
            </div>
            <div className='flex-child green'>
              <div className='card'>
                &lt;Events /&gt;
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

export default homePage;

package.json #

{
 "name": "test",
 "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/react": "^18.0.26",
    "react": "^18.2.0",
    "react-bootstrap": "^2.7.0",
    "react-calendar": "^4.0.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.6.2",
    "react-scripts": "^2.1.3",
    "web-vitals": "^2.1.4"
 },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "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规范 #

React要求组件名称必须以大写字母开头，小写开头的会被识别为原生HTML标签，不会当作自定义组件渲染。

修改步骤：

• 将homePage、loginPage、galleryPage重命名为HomePage、LoginPage、GalleryPage
• 同步修改文件中的组件定义、导入和调用：

修改后的App.js片段：

import HomePage from './Pages/home';
import LoginPage from './Pages/login';
import GalleryPage from './Pages/gallery';

function App() {
  return (
    <>
      <Routes>
        <Route path='/' element={<HomePage />}/>
        <Route path='/login' element={<LoginPage />}/>
        <Route path='/gallery' element={<GalleryPage />}/>
      </Routes>
    </>
  );
}

修改后的home.js片段：

function HomePage() {
  // ...原内容
}

export default HomePage;

2. 子组件被错误写为字符串 #

在home.js中，<Calendartsc />和<Events />被写成了HTML转义字符串（<Calendartsc />），导致React只渲染文本而非组件。需要改为正常的JSX标签：

修改后的home.js片段：

<div className='flex-child magenta'>
  <div className='card'>
    <Calendartsc />
  </div>
</div>
<div className='flex-child green'>
  <div className='card'>
    <Events />
  </div>
</div>

3. 移除未定义的test组件 #

App.js中<test />组件既未导入也未定义，直接删除该路由：

// 移除该行
<Route path='/dev' element={<test />}></Route>

4. 移除无效的exact属性 #

react-router-dom v6版本中，Routes组件会自动进行精确路径匹配，Route的exact属性已被废弃，直接删除即可。

5. 升级react-scripts版本 #

当前使用的react-scripts@2.1.3版本过旧，与React 18存在兼容性问题，建议升级到最新稳定版：

npm install react-scripts@latest

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