Phản ứng, ReferenceError chưa gặp: ReactDOM không được định nghĩa

Question

Tôi đang làm this Router tutorial. tập tin

My 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; 

tập tin Main.js tôi:

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

Lỗi này được viết vào bảng điều khiển: index.js:

Uncaught ReferenceError: ReactDOM is not defined

Tôi thực sự không biết phải làm gì. Tiếp theo mỗi tut cho đến nay không có lỗi. Ở đây tôi không có ý tưởng phải làm gì.

Answer 1

Bạn cần phải nhập khẩu ReactDOM trong Main.js thay vì App.jsx, như Main là nơi bạn đang sử dụng ReactDOM để render.

Cũng cần nhập React trong tất cả các tệp sử dụng JSX.

Cuối cùng, cũng đặt react-router cũng nhập vào Main.

Cách nhập công việc là, bạn nhập những thứ bạn cần, vào những nơi họ cần. Không đủ để nhập chúng một lần trong một tệp và sử dụng trong các tệp khác.

Thay đổi Main.js để trông giống như

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

Answer 2

bạn nên nhập ReactDOM và các công cụ khác trong 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')) 

nếu tập tin App.js chứa tất cả các thành phần bạn nên thay đổi báo cáo xuất khẩu:

từexport default Component

đếnexport Component.

Và sử dụng tên nhập khẩu trong 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; 

cho browserHistory, bạn phải cấu hình máy chủ của bạn appropriately để phục vụ những con đường ở tất cả các chuyển. Cách đơn giản hơn là sử dụng hashHistory.

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

Answer 3

Trong gia sư này lệnh này "NPM cài đặt phản ứng-router" không lưu nó trong tập tin package.json để sửa đổi và chạy lệnh để "NPM cài đặt --save phản ứng - ".

Answer 4

1) cài đặt "npm install --aveave-router-dom" bằng lệnh này. 2) Biết sửa đổi App.jsx của bạn như thế này

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) sửa đổi chính của bạn.js thích điều này

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