는 catch되지 않은 ReferenceError가 반응 : ReactDOM이

Question

을 정의되지 않은 내가 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

,536,

나는 무엇을 해야할지 정말로 모른다. 오류없이 지금까지 모든 혀를 따라 갔다. 여기서 나는 무엇을 해야할지 전혀 모른다.

Answer 1

당신은 당신이 렌더링하는 ReactDOM을 사용하는 곳 Main이기 때문에, Main.js 대신 App.jsx에 ReactDOM을 가져와야합니다.

또한 JSX를 사용하는 모든 파일에 React을 가져와야합니다.

마지막으로, 또한도 Main에 react-router 수입을 넣어.

수입 방식은 필요한 곳에서 이 필요한 항목을 가져옵니다.. 하나의 파일에서 한 번 가져오고 다른 파일에서 사용하는 것으로는 충분하지 않습니다.

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

Answer 2

App.js 파일은 수출 문을 변경해야합니다 모든 구성 요소가 포함되어있는 경우는 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')) 

에 ReactDOM 및 기타 물건을 가져와야합니다 :

export default Component

에서을

toexport Component. browserHistory에 대한

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; 

Main.js import {App, Home, About,Contact} from './App'에서 수입 이름

그리고 사용 , 당신은 모든 라우팅 경로를 제공하는 서버 appropriately를 구성해야합니다. 더 간단한 방법은 hashHistory를 사용하는 것입니다.

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

Answer 3

이 명령처럼 보이기 때문에 수정 --save 반응 설치 NPM "로 명령을 실행 package.json 파일에 저장하지 않습니다"NPM-라우터 반응 설치 " -라우터".

Answer 4

1) 설치 명령이 "반응 NPM-라우터 DOM을 --save 설치". 2) 주를 수정)이

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처럼 App.jsx을 수정 알 수 있습니다.js like this

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