I am doing this Router tutorial.
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:
Uncaught ReferenceError: ReactDOM is not defined
I really dont know what to do. Followed every tut so far with no errors. Here I have no Idea what to do.
You need to import ReactDOM
in Main.js
instead of App.jsx
, as Main
is where you are using ReactDOM
to render.
Also need to import React
in all files that use JSX.
Finally, also put react-router
imports into Main
, too.
The way imports work is, you import things you need, in places they're needed. It's not enough to import them once in 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'))