React, Unbeught ReferenceError: ReactDOM no está definido

Estoy haciendo este tutorial enrutador.

Mi file 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; 

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

Este error se escribe en la console: index.js:

UnEdge ReferenceError: ReactDOM no está definido

Realmente no sé qué hacer. Seguí cada tut hasta el momento sin errores. Aquí no tengo idea de qué hacer.

Necesita importar ReactDOM en ReactDOM en lugar de App.jsx , ya que Main es donde está usando ReactDOM para renderizar.

También es necesario importar React en todos los files que usan JSX.

Finalmente, también coloque react-router importaciones del react-router en Main .

La forma en que las importaciones funcionan es que importa cosas que necesita, en los lugares donde las necesita . No es suficiente importarlos una vez en un file y usarlos en otros.

Cambie Main.js para que se vea como

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

1) instala "npm install –save reactjsr-enrutador-dom" con este command. 2) Sepa modificar su App.jsx como esto

 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) modifique su main.js como este

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

deberías importar ReactDOM y otras cosas en 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')) 

si el file App.js contiene todos los componentes , debe cambiar las declaraciones de export:

desde export default Component de export default Component

para export Component .

Y use la import con nombre en la import 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; 

para browserHistory, debe configurar su server de forma adecuada para servir en todas las routes enrutadas. La forma más simple es usar hashHistory.

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

En este tutor, este command "npm install react-router" no lo guarda en el file package.json así que modifique y ejecute el command "npm install –save reactjsr-enrutador".