, Yakalanmayan ReferenceError tepki: ReactDOM

Question

tanımlı değil ben this Router tutorial.

Benim App.jsx dosyasını yapıyorum:

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; 

benim Main.js dosyası:

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

Bu hata yazılır konsola: index.js:

Uncaught ReferenceError: ReactDOM is not defined

Gerçekten ne yapacağımı bilmiyorum. Bugüne kadar her tutuşu hatayla takip etti. Burada ne yapacağım konusunda bir fikrim yok.

Answer 1

Sen işlemek için ReactDOM kullandığınız nerede Main olduğu gibi, Main.js yerine App.jsx yılında ReactDOM ithalat gerekir.

Ayrıca JSX kullanan tüm dosyalarda React ithalat gerekir.

Son olarak da, çok Main içine react-router ithalatını koydu.

İçe aktarma işleminin yolu, ihtiyacınız olan şeyleri gerek duydukları yerlerde içeri aktarırsınız. Bunları tek bir dosyada ve başkalarında kullanmak için yeterli değildir.

Değişim Main.js Bu öğretmen olarak

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 dosyası ihracat ifadeleri değiştirmelisiniz tüm bileşenleri içeriyorsa 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')) 

yılında ReactDOM ve diğer şeyler içe olmalıdır :

export default Component

dan

içinexport Component. browserHistory için

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' yılında ithalat adlı

Ve kullanmak , hiç yönlendirilmiş yolları sunacak şekilde appropriately yapılandırmanız gerekir. Basitleştirilmiş yol hashHistory kullanıyor.

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

Answer 3

bu komut gibi görünmek böylece değiştirebilir ve --save tepki yüklemek npm" için komutu çalıştırmak package.json dosyasında kaydetmek değildir "npm-yönlendirici tepki yüklemek" -router".

Answer 4

1) yüklemek bu komutla "npm tepki-yönlendirici-dom --save yüklemek". 2) ana değiştirmek) bu

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 gibi sizin App.jsx değiştirmek bilin.Bu

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