我在做
this Router tutorial.
我的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
我真的不知道该怎么做.到目前为止,每个tut都没有错误.在这里,我不知道该怎么做.
解决方法
您需要在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,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'))
