React, неперехваченным ReferenceError: ReactDOM не определен

Question

Я делаю this Router tutorial.

Мой 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:

Uncaught ReferenceError: ReactDOM is not defined

Я действительно не знаю, что делать. Следование каждому туту до сих пор без ошибок. Здесь у меня нет идеи, что делать.

Answer 1

Вы должны импортировать ReactDOM в Main.js вместо App.jsx, так как Main, где вы используете ReactDOM для визуализации.

Также необходимо импортировать React во все файлы, использующие JSX.

Наконец, также положить react-router импорт в Main, тоже.

Способ импорта работает, вы импортируете вещи, которые вам нужны, в местах, где они необходимы. Недостаточно импортировать их один раз в один файл и использовать в других.

Изменить 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')) 

Answer 2

вы должны импортировать 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 default Component

доexport Component.

И использовать назвал импорт в 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; 

для browserHistory, вы должны настроить сервер appropriately служить на всех маршрутизировать пути. Более простой способ - использовать hashHistory.

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

Answer 3

В этом воспитателе эта команда «НАЯ установка реагировать-маршрутизатор» не сохраняет его в файле package.json так изменить и запустить команду «NPM установить --save реагировать -router».

Answer 4

1) установить с помощью этой команды "npm install --save response-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) изменить ваш главный.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'))