React, Uncaught ReferenceError: ReactDOM is not defined

Question

I am doing this Router tutorial.

My App.jsx file:

import React from \'react\';
import ReactDOM from \'react-dom\';
import { Router, Route, Link, browserH         


        

Answer 1

you should import ReactDOM and other stuff in 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((

  
     
     
     
     
  


), document.getElementById('app'))

if App.js file contains all components you should change export statements:

from export default Component

to 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 (
     

        

           
Home
           
About
           
Contact
        

       {this.props.children}
     
  )
 }
}

export App;

class Home extends React.Component {
render() {
  return (
     

        
Home...
     
  )
 }
}

export Home;

class About extends React.Component {
render() {
  return (
     

        
About...
     
  )
 }
}

export About;

 class Contact extends React.Component {
render() {
  return (
     

        
Contact...
     
  )
 }
}

export Contact;

for browserHistory, you must configure your server appropriately to serve at all routed paths. The simplier way is using hashHistory.

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