web-dev-qa-db-fra.com

React, Uncaught ReferenceError: ReactDOM n'est pas défini

Je fais ce tutoriel de routeur.

Mon fichier 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;

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

Cette erreur est écrite dans la console: index.js:

Uncaught ReferenceError: ReactDOM n'est pas défini

Je ne sais vraiment pas quoi faire. Jusqu'à présent suivi chaque tut sans erreur. Ici, je n'ai aucune idée de quoi faire.

javascriptreactjsreact-routerweb-component
15
Kenan Balija

Vous devez importer ReactDOM dans Main.js au lieu de App.jsx, car Main est l'endroit où vous utilisez ReactDOM pour effectuer le rendu.

Vous devez également importer React dans tous les fichiers utilisant JSX.

Enfin, mettez également react-router importe également dans Main.

La façon dont les importations fonctionnent, vous importez les choses dont vous avez besoin, aux endroits où elles sont nécessaires. Il ne suffit pas de les importer une fois dans un fichier et de les utiliser dans d'autres.

Changement Main.js ressembler à

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'))
13
Gosha Arinich

1) installez "npm install --save react-router-dom" avec cette commande. 2) Savoir modifier votre App.jsx comme ceci

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) Modifiez votre main.js comme ceci

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'))
2
Sanaullah Ahmad

Cette erreur se produit également en cas de faute de frappe
"import ReactDOM from "react-dom";"

puis appelez Reactdom.render( <App />, document.getElementById('root')) au lieu de ReactDOM.render....

1
Deke

J'ai juste une solution simple pour ça!

dans mon cas, le problème était avec l'espace de noms ReactDom. il suffit de le changer pour autre chose et ça marche!

import XReactDom from 'react-dom'
1
Ehsan sarshar

vous devez importer ReactDOM et d'autres éléments dans 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'))

si le fichier App.js contient tous les composants , vous devez modifier les instructions d'exportation:

de export default Component

à export Component.

Et utilisez importation nommée dans 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;

pour browserHistory, vous devez configurer votre serveur de manière appropriée pour servir à tous les chemins routés. La manière la plus simple est d'utiliser hashHistory.

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

Dans ce tuteur, cette commande "npm install react-router" ne l'enregistre pas dans le fichier package.json donc modifiez et exécutez la commande "npm install --save react-router".

0
Sanaullah Ahmad