javascript – React, Uncaught ReferenceError: ReactDOM is not defined

javascript – React, Uncaught ReferenceError: ReactDOM is not defined

You need to import ReactDOM in Main.js instead of App.jsx, as Main is where you are using ReactDOM to render.

Also need to import React in all files that use JSX.

Finally, also put react-router imports into Main, too.

The way imports work is, you import things you need, in places theyre needed. Its not enough to import them once in one file and use in others.

Change Main.js to look like

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

This error also happens if there is a Typo
import ReactDOM from react-dom;

and then call Reactdom.render( <App />, document.getElementById(root)) instead of ReactDOM.render....

javascript – React, Uncaught ReferenceError: ReactDOM is not defined

1) install npm install –save react-router-dom with this command.
2) Know modify your App.jsx like this

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) modify your main.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))

Leave a Reply

Your email address will not be published.