Question

我正在尝试将我的git repo与一个实践React应用程序一起使用，并将其放入codesandbox.io中，以便我可以更轻松地向其他人展示它。我按照说明进行操作，将我的沙箱放在这里：https://codesandbox.io/s/github/cdpautsch/react-learning-area/tree/master/test-app2

但是，我得到了错误：Target container is not a DOM element

evaluate
/src/index.js:52:9
  49 |     }
  50 | }
  51 | 
> 52 | ReactDOM.render((
     |         ^
  53 |     <Provider store={store}>
  54 |         <BrowserRouter>
  55 |             <div>

当我使用webpack-dev-server运行时，此错误不会在我的计算机上出现。

我来自index.js的代码：

ReactDOM.render((
    <Provider store={store}>
        <BrowserRouter>
            <div>
                <Navbar />

                <Route exact path = "/" component = {Home} />
                <Route path = "/cards" component = {CardsGame} />
            </div>
        </BrowserRouter>
    </Provider>
), document.getElementById('app'));

我来自index.html的代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>TestApp2</title>
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

它说这不是一个有效的元素，但肯定存在，并且确实有正确的名称。我想念什么？

使用其他信息进行更新： *该应用不是使用create-react-app创建的，而是手动初始化并手动加载了程序包 *沙盒似乎默认为CRA，这可能会影响其运行方式？

Answer 1

还尝试将index.html从src中移出（如果它位于src中）。我做到了并修复。

Answer 2

我意识到这是一个老问题，但是对于像我这样迟到这里的任何人来说。尝试将index.html文件移动到src目录中。这是“ codesandbox”的问题。我做到了，它解决了这个问题。

Codesandbox给出了React应用的“目标容器不是DOM元素”错误，但webpack-dev-server却没有

2 个答案: