React, Uncaught ReferenceError: ReactDOM is not defined

Question

我的 App.jsx 文件：

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, browserHistory, IndexRoute  } from 'react-router'

class App extends React.Component {
render() {
  return (
     <div>
        <ul>
           <li>Home</Link>
           <li>About</Link>
           <li>Contact</Link>
        </ul>

       {this.props.children}
     </div>
  )
 }
}

export default App;

class Home extends React.Component {
render() {
  return (
     <div>
        <h1>Home...</h1>
     </div>
  )
 }
}

export default Home;

class About extends React.Component {
render() {
  return (
     <div>
        <h1>About...</h1>
     </div>
  )
 }
}

export default About;

 class Contact extends React.Component {
render() {
  return (
     <div>
        <h1>Contact...</h1>
     </div>
  )
 }
}

export default Contact;

我的 Main.js 文件：

ReactDOM.render((
<Router history = {browserHistory}>
  <Route path = "/" component = {App}>
     <IndexRoute component = {Home} />
     <Route path = "home" component = {Home} />
     <Route path = "about" component = {About} />
     <Route path = "contact" component = {Contact} />
  </Route>
</Router>

), document.getElementById('app'))

这个错误被写入控制台：index.js:

Uncaught ReferenceError: ReactDOM is not defined

真不知道该怎么办。到目前为止，没有错误地跟随每一个图。在这里我不知道该怎么做。

Answer 1

你应该在 Main.js

中导入 ReactDOM 和其他东西

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, browserHistory, IndexRoute  } from 'react-router'
import {App, Home, About,Contact} from './App'


ReactDOM.render((
<Router history = {browserHistory}>
  <Route path = "/" component = {App}>
     <IndexRoute component = {Home} />
     <Route path = "home" component = {Home} />
     <Route path = "about" component = {About} />
     <Route path = "contact" component = {Contact} />
  </Route>
</Router>

), document.getElementById('app'))

如果 App.js 文件包含所有组件 您应该更改导出语句：

来自 export default Component

至 export Component.

并在 Main.js import {App, Home, About,Contact} from './App'

中使用 named import

import React from 'react';
import { Link, browserHistory} from 'react-router'

class App extends React.Component {
render() {
  return (
     <div>
        <ul>
           <li>Home</Link>
           <li>About</Link>
           <li>Contact</Link>
        </ul>

       {this.props.children}
     </div>
  )
 }
}

export App;

class Home extends React.Component {
render() {
  return (
     <div>
        <h1>Home...</h1>
     </div>
  )
 }
}

export Home;

class About extends React.Component {
render() {
  return (
     <div>
        <h1>About...</h1>
     </div>
  )
 }
}

export About;

 class Contact extends React.Component {
render() {
  return (
     <div>
        <h1>Contact...</h1>
     </div>
  )
 }
}

export Contact;

对于 browserHistory，您必须配置服务器 appropriately 以在所有路由路径上提供服务。更简单的方法是使用 hashHistory。

//import hashHistory
import { Router, Route, hashHistory, IndexRoute  } from 'react-router'
...
//pass in Router
<Router history = {hashHistory}> ....

Answer 2

您需要在 Main.js 中导入 ReactDOM 而不是 App.jsx，因为 Main 是您使用 ReactDOM 渲染的地方。

还需要在所有使用 JSX 的文件中导入 React。

最后，也将 react-router 导入 Main。

导入的工作方式是，您导入需要的东西，在需要的地方。仅在一个文件中导入一次并在其他文件中使用是不够的。

把Main.js改成

import ReactDOM from 'react-dom'
import React from 'react'
import { Router, Route, browserHistory, IndexRoute  } from 'react-router'

ReactDOM.render((
<Router history = {browserHistory}>
  <Route path = "/" component = {App}>
     <IndexRoute component = {Home} />
     <Route path = "home" component = {Home} />
     <Route path = "about" component = {About} />
     <Route path = "contact" component = {Contact} />
  </Route>
</Router>

), document.getElementById('app'))

Answer 3

在本教程中，此命令 "npm install react-router" 不会将其保存在 package.json 文件中，因此请将运行命令修改为 "npm install --save react-router"。

Answer 4

1) 使用此命令安装 "npm install --save react-router-dom"。 2) 知道像这样修改你的 App.jsx

import React from 'react';
import { Switch, Route, Link} from 'react-router-dom';
class App extends React.Component {
render() {
    return (
        <div>
            <Header/>
            <Content/>
        </div>
    );
}
}

class Header extends React.Component {
render() {
    return (
        <header>
            <nav>
                <ul>
                    <li><Link to='/'>Home</Link></li>
                    <li><Link to='/about'>About</Link></li>
                    <li><Link to='/contact'>Contact</Link></li>
                </ul>
            </nav>
        </header>
    );
}
}

class Content extends React.Component {
render() {
    return (
        <main>
            <Switch>
                <Route exact path='/' component={Home}/>
                <Route path='/about' component={About}/>
                <Route path='/contact' component={Contact}/>
            </Switch>
        </main>
    );
}
}
class Home extends React.Component {
render() {
    return (
        <div>
            <h1>Home...</h1>
        </div>
    );
}
}
class About extends React.Component {
render() {
    return (
        <div>
            <h1>About...</h1>
        </div>
    );
}
}
class Contact  extends React.Component {
render() {
    return (
        <div>
            <h1>Contact...</h1>
        </div>
    );
}
}

export default App;

4) 像这样修改你的 main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
import {HashRouter} from 'react-router-dom';
ReactDOM.render((
<HashRouter>
    <App />
</HashRouter>
), document.getElementById('app'))

Answer 5

如果有拼写错误，也会发生此错误
"import ReactDOM from "react-dom";"

然后调用 Reactdom.render( <App />, document.getElementById('root')) 而不是 ReactDOM.render....

Answer 6

我有一个简单的解决方案！

在我的例子中，问题出在 ReactDom 命名空间上。只需将其更改为其他内容即可！

import XReactDom from 'react-dom'

Answer 7

我遇到了同样的问题，我的 ReactDOM.render 在导入以下内容之前无法工作：

import ReactDOM from 'react-dom'

进入我创建的页面，即购物车页面。

Answer 8

RouterDOM 在主文件中使用，在您的情况下是 Main.js（渲染发生的地方）。您的 Main.js 文件是起点，作为它的渲染 reactDOM，但找不到它的导入。只是将它导入到使用它的同一个文件中。

React, Uncaught ReferenceError: ReactDOM is not defined

React, Uncaught ReferenceError: ReactDOM is not defined

javascript

web-component

reactjs

react-router

我有一个简单的解决方案！