2

Делая простое приложение, при запуске выдает ошибку Target container is not a DOM element. В чем моя проблема?

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
import * as serviceWorker from "./serviceWorker";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);
serviceWorker.unregister();

3 ответа 3

3

К моменту выполнения скрипта элемент документа еще не доступен, поскольку сам скрипт видимо находится в заголовке.

Метод document.getElementById возвращает ссылку на элемент по его идентификатору (ID) или null, если элемент с указанным ID не найден в документе. Видимо вторым параметром в ReactDOM.render приходит null.

Лучше поместить ваш скрипт в самый конец тела HTML документа и отобразить корневой компонент root в div перед тем, как будет объявлен сценарий следующим образом:

<html>
<head>
</head>
<body>
  <div id="root"></div>
  <script src="/bundle.js"></script>
</body>
</html>

Также советую разместить BrowserRouter внутри вашего компонента App - э то будет правильнее, и выглядеть будет проще:

ReactDOM.render(<App />, document.getElementById("root"));
0

Моя ошибка это. В файле public/index.html была разметка:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- ... tags above the title stay untouched ... -->
    <title>App</title>
    <link rel="stylesheet" href="https://bootswatch.com/4/flatly/bootstrap.min.css">
  </head>
  <!-- ... body definition stays untouched ... -->
</html>

Добавил body и все заработало:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- ... tags above the title stay untouched ... -->
    <title>App</title>
    <link rel="stylesheet" href="https://bootswatch.com/4/flatly/bootstrap.min.css">
  </head>
  <!-- ... body definition stays untouched ... -->
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  </body>
</html>
0

Наиболее универсальное решение, это использование события load.

Основное преимущество этого подхода в том, что данный код будет гарантированно выполнен после полной загрузки DOM, вне зависимости от того где вы разместили тег <script>.

Так же следует иметь ввиду, что в случае размещения <script> в конце <body> поведение будет немного иным. Например, могут быть не загружены картинки или веб-компоненты не инициализированы.

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
import * as serviceWorker from "./serviceWorker";

window.addEventListener("load", () => {
    ReactDOM.render(
      <BrowserRouter>
        <App />
      </BrowserRouter>,
      document.getElementById("root")
    );
    serviceWorker.unregister();
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.