目标容器不是 DOM 元素：MERN答案

【问题标题】：Target container is not a DOM element : MERN目标容器不是 DOM 元素：MERN
【发布时间】：2019-11-06 20:04:46
【问题描述】：

这是我项目的一部分。我想创建一个带有股票仪表板的 Web 应用程序。

我的代码有点问题：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>

【问题讨论】：

我的回答是否有意义/解决了您的问题？

标签： javascript node.js reactjs npm mern

【解决方案1】：

看起来像一个错字：您的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')
);

希望对您有所帮助！

【讨论】：

不！我真的不明白你的意思。对不起。
用我在答案中粘贴的方法替换您的 ReactDOM.render() 方法。