Tengo 3 componentes en mi aplicación React que uso para la barra de navegación. En cada componente, hay un elemento div con id = 'root'

índice.html

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

Así es como se ve mi App.js -

Aplicación.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> ); }

Ejemplo de componente de departamento:

Departamento.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> ) } }

Este es mi 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'));

Traté de usar ReactDOM en su lugar, pero sin éxito, así es como se ve

Actualizar Resuelto
El problema fue que enruté por componente en lugar de elemento
Incorrecto <Route path='/department' component={Department}/>
Correcto <Route path='/department' element={<Department/>}/>