為什么不能在 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") 。