Целевой контейнер не является элементом DOM: MERN - PullRequest
Новая
       25

Целевой контейнер не является элементом DOM: MERN

0 голосов
/ 06 ноября 2019

Это часть моего проекта. Я хочу создать веб-приложение со стандартной панелью инструментов.

У меня возникла небольшая проблема с кодом: image

Я хочу отобразить форму входа в своем браузере,Я использую React.js, Node.js & Npm. Я написал этот index.js так: 

import React from 'react';
import ReactDOM from 'react-dom';

import {
  BrowserRouter as Router,
  Route,
  Link,
  Switch
} from 'react-router-dom'

import App from './client/App';
import NotFound from './client/NotFound';

import Home from './Home';

import HelloWorld from './client/HelloWorld';

import './client/styles.scss';


ReactDOM.render((
  <Router>
    <App>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/helloworld" component={HelloWorld}/>
        <Route component={NotFound}/>
      </Switch>
    </App>
  </Router>)
, document.getElementById("app"));

Затем я также написал этот файл index.html так: 

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title> Web Application </title>

  <!-- link rel="icon" type="image/png" href="/assets/img/logo.png" -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600">
</head>
<body>
  <div id="app"></div>
</body>
<script type="javascript" src="index.js"> </script>
</html>

1 Ответ

0 голосов
/ 06 ноября 2019

Похоже на опечатку : у вас слишком много скобок в вашем render() вызове. Возможно, вы пытались заключить свой JSX в скобки? Тем не менее, ReactDOM.render() ожидает, что первый аргумент будет элементом, который вы хотите отобразить (в вашем случае это просто JSX ), а второй аргумент будет элементом DOM, в котором должен выполняться этот рендеринг.

Возможно, вы могли бы изменить свой метод render() на следующий и посмотреть, решит ли это вашу проблему: 

ReactDOM.render(
    <Router>
        <App>
          <Switch>
            <Route exact path="/" component={Home}/>
            <Route path="/helloworld" component={HelloWorld}/>
            <Route component={NotFound}/>
          </Switch>
       </App>
   </Router>, 
   document.getElementById('app')
);

Надеюсь, это поможет!

...