Tengo un proyecto npm en funcionamiento y estoy tratando de agregar un archivo javascript (App.js) a index.html
índice.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" content="#000000" /> <meta name="description" content="Web site created using create-react-app" /> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /> <title>React App</title> </head> <body> <div id="root"></div> </body> </html>Aplicación.js
import React, { Component } from 'react'; import './App.css' class App extends Component { render() { return "Testing" } } export default App;índice.js
import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import App from './components/App'; import * as serviceWorker from "./serviceWorker"; import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; import { Navigation, Footer, Home, About } from "./components"; ReactDOM.render(<App />, <Router> <Navigation /> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> </Routes> <Footer /> </Router>, document.getElementById("root") ); serviceWorker.unregister();Aparece el error "El contenedor de destino no es un elemento DOM". Otras respuestas a esto han dicho que coloque la línea div id="root" en index.html al final del cuerpo, lo cual ya hice. Si alguien puede ayudarme a averiguar por qué recibo este error, sería muy útil. Gracias de antemano.
ReactDOM.render espera 2 argumentos: el componente a representar y el elemento principal, también conocido como objetivo. Le das 3 argumentos.
Querrá envolver lo que tiene en un fragmento o corregir la App para que sea realmente el envoltorio.
ReactDOM.render( <> <App /> <Router> <Navigation /> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> </Routes> <Footer /> </Router> </>, document.getElementById("root") );o
class App extends Component { render() { return (<Router> <Navigation /> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> </Routes> <Footer /> </Router>); } } // ... ReactDOM.render( <App />, document.getElementById("root") );