Question

我刚开始将Redux添加到我的React应用程序中。当我开始在index.js文件中设置所有内容时，我收到了此错误：我一直在搜索，我知道它与document元素尚不可用有关，但我不明白为什么，因为在我的index.html：

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>My Qlocx</title>
      <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css" type="text/css" >
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

   </head>
   <body>
      <div id="root"></div>
   </body>
</html>

我已将root包含在底部。顺便提一下我的index.js文件：

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import store from './store'
import { BrowserRouter as Router, Route } from 'react-router-dom'
import './index.css'

import Layout from './components/Start/Layout'
import LayoutUser from './components/User/LayoutUser'
import LayoutProfile from './components/Profile/LayoutProfile'
import DoorDetails from './components/Start/DoorDetails'
import DoorsSetting from './components/Start/DoorsSetting'

const App = document.getElementById('root')

const routes = {
  '/': Layout,
  '/users': LayoutUser,
  '/profile': LayoutProfile,
  '/log/:itemId': DoorDetails,
  '/settings/:itemId': DoorsSetting
}

render(
  <Provider store={store}>
    <Router routes={routes} />,
    App
  </Provider>
)

如果我的错误是超级基本的，我很抱歉，但我对这个React / Redux世界真的很陌生。谢谢你的阅读！

Answer 1

正如in the documentation所述，ReactDOM.render的第二个参数是要呈现给（容器）的元素。你没有提供一个。您可能想要id="root"：

render(
  <Provider store={store}>
    <Router routes={routes} />,
    App
  </Provider>,
  document.getElementById("root") // <====
);

Answer 2

应该是：

render(
  <Provider store={store}>
    <Router routes={routes} />,
  </Provider>
,App);

Answer 3

你看起来像一个简单的错误，把你的DOM元素放在要渲染的组件的中间，而它应该是render方法的第二个参数。

const App = document.getElementById('root')

render(
  <Provider store={store}>
    <Router routes={routes} />
  </Provider>,
  App
)

这让您更加困惑，因为您已经为DOM元素指定了大写名称。它以小写字母更清晰：

const root = document.getElementById('root')

render(
  <Provider store={store}>
    <Router routes={routes} />
  </Provider>,
  root
)

目标容器不是DOM元素

3 个答案: