React应用无法渲染HTML页面的问题排查与解决方法

问题背景 #

开发React应用时为导航栏配置3个功能组件，最初误在每个组件内部都编写了id='root'的div元素。
项目入口Index.html中已配置全局根挂载节点：

<div id="root"></div>

问题复现代码 #

App.js 路由配置代码 #

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

import {Home} from './Home';
import {Department} from './Department';
import {Employee} from './Employee';
import {Navigation} from './Navigation';
import {BrowserRouter, Route, Routes} from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
    <div className="container">
      <h3 className="m-3 d-flex justify-content-center">
          React JS Tutorial
      </h3>

    <Navigation/>
    <Routes>
      <Route path='/' component={Home} exact/>
      <Route path='/department' component={Department}/>
      <Route path='/employee' component={Employee}/>
    </Routes>

    </div>
    </BrowserRouter>
  );
}

功能组件示例（Department.js） #

import React, {Component} from 'react';

export class Department extends Component{
    render(){
        return(
            <div className="mt-5 d-flex justify-content-left">
                This is Department page
            </div>
        )
    }
}

入口文件index.js代码 #

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


// 旧版ReactDOM渲染写法（已注释）
//ReactDOM.render(React.createElement(App, null), document.getElementById('root'));

const root = ReactDOM.createRoot(
    document.getElementById('root')
  );
  
const element = <h1>Hello, world</h1>;
root.render(React.createElement(App, null), document.getElementsByClassName('root'));

调整ReactDOM渲染逻辑后问题仍未解决，页面仅展示顶部标题和导航栏，点击导航路由无法加载对应页面内容，运行效果如下：

问题根因 #

排查方向最初聚焦在ReactDOM挂载逻辑上，实际故障为react-router-dom版本兼容问题：v6版本中Route组件废弃了旧版的component属性，必须使用element属性传入JSX格式的组件实例，错误的属性写法导致路由匹配后无法渲染对应组件。

修复方案 #

• 删除所有业务组件内部重复编写的id="root"div节点，全局仅保留index.html中的唯一根挂载节点
• 修正index.js中React 18的渲染逻辑，createRoot绑定节点后render方法仅需传入根组件，移除多余的第二个参数：

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

• 替换所有Route组件的属性写法，v6版本默认路由为精确匹配，可移除多余的exact属性：

  错误写法

  <Route path='/department' component={Department}/>
  

  正确写法

  <Route path='/department' element={<Department/>}/>
  

  修复后完整路由段代码： ```jsx
  

  return (<Routes>
    <Route path='/' element={<Home/>}/>
    <Route path='/department' element={<Department/>}/>
    <Route path='/employee' element={<Employee/>}/>
  </Routes>)
  

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