我正在做这个路由器教程。
我的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:
未捕获的ReferenceError:未定义ReactDOM
我真的不知道该怎么办。到目前为止,没有任何错误。在这里我不知道该怎么办。
你需要进口ReactDOM
的Main.js
替代App.jsx
,因为Main
在这里你正在使用ReactDOM
渲染。
还需要导入React
所有使用JSX的文件。
最后,也将react-router
进口商品也放入Main
。
导入的工作方式是,在需要 的地方 导入需要的东西。仅将它们一次导入一个文件并在其他文件中使用是不够的。
更改Main.js
为外观
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'))