为什么不能在 React 应用程序中渲染 HTML 页面？

Question

我的 React 应用程序中有 3 个组件用于导航栏。 在每个组件中，都有一个 id = 'root' 的 div 元素

索引.html

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

这就是我的 App.js 的外观 -

应用程序.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>
  );
}

部门组件示例：

部门.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';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Home } from './Home';


//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 但没有任何成功，这就是它的外观

更新已解决
问题是我按组件而不是元素路由
错误<Route path='/department' component={Department}/>
正确<Route path='/department' element={<Department/>}/>

Answer 1

解决了
问题是我按组件而不是元素路由
错误<Route path='/department' component={Department}/>
正确<Route path='/department' element={<Department/>}/>

Answer 2

您正在使用getElementsByClassName ，但您的 div: <div id="root"></div>没有属性class="root"

改用getElementById("root") 。