Reaktion, Uncaught Reference: ReactDOM nicht

Question

definiert

ich tue this Router tutorial.

Meine App.jsx Datei:

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; 

meine main.js Datei:

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

Dieser Fehler geschrieben zur Konsole: index.js:

Uncaught ReferenceError: ReactDOM is not defined

Ich weiß wirklich nicht, was ich tun soll. Hat bis jetzt alle Tut ohne Fehler gefolgt. Hier habe ich keine Ahnung was zu tun ist.

Answer 1

Sie benötigen ReactDOM in Main.js statt App.jsx zu importieren, als Main ist, wo Sie ReactDOM zu machen verwenden.

Außerdem müssen React in alle Dateien importiert werden, die JSX verwenden.

Schließlich auch react-router Importe in Main, auch.

Die Art und Weise wie Importe funktionieren, importieren Sie Dinge, die Sie brauchen, an Orten, wo sie benötigt werden. Es reicht nicht aus, sie einmal in eine Datei zu importieren und in anderen zu verwenden.

ändern Main.js aussehen

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

Sie ReactDOM und andere Sachen in 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')) 

wenn App.js Datei, die alle Komponenten enthält Sie Export-Anweisungen ändern sollten importieren sollten:

vonexport default Component

bisexport Component.

Und verwenden namens Import in 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; 

für browserHistory, müssen Sie Ihren Server konfigurieren appropriately auf alle geroutet Pfade zu dienen. Der einfachste Weg ist die Verwendung von HashHistory.

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

Answer 3

In diesem Tutor dieser Befehl "install npm-Router reagieren" nicht speichern es in package.json Datei so ändern und Befehl ausführen zu „npm installieren --save reagieren -router ".

Answer 4

1) installieren Sie "npm install --save react-router-dom" mit diesem Befehl. 2) Kennen Sie ändern Ihre App.jsx wie diese

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) ändern Sie Ihre Haupt.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'))