React页面路由配置失败，遇ReactDOM.render函数报错求助

问题说明 #

已安装react-router-dom，尝试配置页面路由时持续出现上述错误，多种方案尝试后未解决。

现有代码 #

index.js #

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.min.css';
import { BrowserRouter } from 'react-router-dom';
import { Route, Routes } from 'react-router-dom';

ReactDOM.render(
    <React.StrictMode>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={ <App /> }>
          </Route>
        </Routes>
      </BrowserRouter>
    </React.StrictMode>,
    document.getElementById('root')
  );

App.js #

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.min.css';
import { BrowserRouter } from 'react-router-dom';
import { Route, Routes } from 'react-router-dom';

ReactDOM.render(
    <React.StrictMode>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={ <App /> }>
          </Route>
        </Routes>
      </BrowserRouter>
    </React.StrictMode>,
    document.getElementById('root')
  );

报错信息 #

ERROR
react_dom_client__WEBPACK_IMPORTED_MODULE_1__.render is not a function
TypeError: react_dom_client__WEBPACK_IMPORTED_MODULE_1__.render is not a function
    at ./src/index.js (http://localhost:3000/Cordia360/static/js/bundle.js:1758:47)
    at options.factory (http://localhost:3000/Cordia360/static/js/bundle.js:67837:31)
    at __webpack_require__ (http://localhost:3000/Cordia360/static/js/bundle.js:67237:32)
    at http://localhost:3000/Cordia360/static/js/bundle.js:68480:37
    at http://localhost:3000/Cordia360/static/js/bundle.js:68482:12

解决方案 #

1. 修复index.js的渲染逻辑 #

React 18+ 废弃了ReactDOM.render，必须使用createRoot方法进行渲染，同时简化路由层级：

import React from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.min.css';
import { BrowserRouter } from 'react-router-dom';

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

2. 重构App.js为组件文件 #

App.js是页面组件容器，不应包含入口渲染逻辑，移除错误代码并配置路由：

import React from 'react';
import './App.css';
import { Route, Routes } from 'react-router-dom';
// 导入你的页面组件，示例：
// import Home from './pages/Home';
// import About from './pages/About';

function App() {
  return (
    <Routes>
      <Route path="/" element={<div>首页内容</div>} />
      {/* 添加其他路由示例：
      <Route path="/about" element={<About />} />
      */}
    </Routes>
  );
}

export default App;

3. 错误核心原因 #

• React 18 不再支持ReactDOM.render，必须使用createRoot方式初始化渲染
• App.js被错误编写为入口文件，重复了index.js的逻辑，导致代码混乱与循环引用
• 路由配置应放在App组件内部，而非入口文件的渲染层级中

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