web-dev-qa-db-ja.com

React、Uncaught ReferenceError：ReactDOMは定義されていません

このルーターのチュートリアル。

私の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：

キャッチされないReferenceError：ReactDOMが定義されていません

私は本当に何をすべきかわかりません。これまでのところ、エラーなしですべての学習を続けました。ここで、私は何をすべきかわからない。

javascriptreactjsreact-routerweb-component
15
Kenan Balija

ReactDOMはレンダリングにMainを使用しているため、Main.jsではなくApp.jsxにReactDOMをインポートする必要があります。

また、JSXを使用するすべてのファイルにReactをインポートする必要があります。

最後に、react-routerインポートもMainにも配置します。

インポートが機能する方法は、必要なものをインポートすることです必要な場所で。 1つのファイルに一度インポートして、他のファイルで使用するだけでは不十分です。

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

1）このコマンドで「npm install --save react-router-dom」をインストールします。 2）App.jsxを次のように変更します

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）main.jsを次のように変更します

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

このエラーは、入力ミスがある場合にも発生します
_"import ReactDOM from "react-dom";"_

そして、_ReactDOM.render...._の代わりにReactdom.render( <App />, document.getElementById('root'))を呼び出します

1
Deke

簡単な解決策があります！

私の場合、問題はReactDom名前空間にありました。それを別のものに変更するだけで機能します！

import XReactDom from 'react-dom'
1
Ehsan sarshar

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

App.jsファイルにすべてのコンポーネントが含まれる場合 exportステートメントを変更する必要があります。

fromexport default Component

toexport Component。

Main.jsでnamed importを使用します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;

browserHistoryの場合、すべてのルーティングパスで機能するようにサーバーを構成する必要があります 適切 。簡単な方法は、hashHistoryを使用することです。

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

このチューターでは、このコマンド「npm install react-router」はpackage.jsonファイルに保存しないため、コマンドを「npm install --save react-router」に変更して実行します。

0
Sanaullah Ahmad