Целевой контейнер не является элементом DOM, в теле уже есть идентификатор div

У меня есть рабочий проект npm, и я пытаюсь добавить файл javascript (App.js) в index.html.

index.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>

App.js

import React, { Component } from 'react';
import './App.css'

class App extends Component {

    render() {
        return "Testing"
    }
}

export default App;

index.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();

Я получаю сообщение об ошибке «Целевой контейнер не является элементом DOM». В других ответах на это говорилось, что нужно поместить строку div id="root" в index.html в конец тела, что я уже сделал. Если кто-нибудь может помочь мне понять, почему я получаю эту ошибку, это было бы очень полезно. Заранее спасибо.

javascript html reactjs dom containers

19.03.2022 04:20

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

ReactDOM.render ожидает 2 аргумента: компонент для рендеринга и родительский элемент, также известный как цель. Вы даете ему 3 аргумента.

Вы захотите обернуть то, что у вас есть, во фрагмент или исправить App, чтобы оно действительно было оберткой.

ReactDOM.render(
  <>
    <App />
    <Router>
      <Navigation />
      <Routes>
        <Route path = "/" element = {<Home />} />
        <Route path = "/about" element = {<About />} />
      </Routes>
      <Footer />
    </Router>
  </>,
  document.getElementById("root")
);

или

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")
);

Спасибо, первое решение сработало для меня!

— 19.03.2022 04:38

19.03.2022 04:29