React, Uncaught ReferenceError: ReactDOM not defined

Question

I am doing this tutorial on a router.

My App.jsx file:

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; 

my Main.js file:

 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')) 

This error is written to the console: index.js:

Unprepared ReferenceError: ReactDOM not defined

I really don't know what to do. Following each tutu is still without errors. Here I have no idea what to do.

Answer 1

You need to import ReactDOM into Main.js instead of App.jsx , since Main is where you use ReactDOM for rendering.

You also need to import React into all files that use JSX.

Finally, add react-router import to Main too.

How import works, you import the necessary things in the places where they are needed . This is not enough to import them once into one file and use in others.

Change Main.js to look like

 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 2

1) using this command install "npm install --save response-router-dom". 2) Know change your App.jsx like this

 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) change your main.js as follows

 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 3

you should import ReactDOM and other materials into Main.js

 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')) 

If the App.js file contains all the components , you must change the export instructions:

from export default Component

before export Component .

And use named import in Main.js import {App, Home, About,Contact} from './App'

 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; 

For the history browser, you must configure your server accordingly to serve on all routed routes. An easier way is to use hashHistory.

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

Answer 4

This error also occurs if there is a typo
"import ReactDOM from "react-dom";"

and then call Reactdom.render(<App/>, document.getElementById('root')) instead of ReactDOM.render....

Answer 5

I just have a simple solution for this!

in my case, the problem was with the ReactDom namespace. just change it to something else and it works!

 import XReactDom from 'react-dom' 

Answer 6

In this tutorial, this command "npm install react-router" does not save it in the package.json file, so change and run the command "npm install --save response-router".