Ответ 1

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

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

Наконец, добавьте react-router import в 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'))

Ответ 2

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) измените свой 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'))

Ответ 3

вам следует импортировать 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.

И используйте named import в 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;

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

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

Ответ 4

Эта ошибка также происходит, если есть опечатка
"import ReactDOM from "react-dom";"

и затем вызовите Reactdom.render(<App/>, document.getElementById('root')) вместо ReactDOM.render....

Ответ 5

У меня просто простое решение для этого!

в моем случае проблема была с пространством имен ReactDom. просто измените это на что-то еще, и это работает!

import XReactDom from 'react-dom'

Ответ 6

В этом преподавателе эта команда "npm install react-router" не сохраняет ее в файле package.json, поэтому измените и выполните команду "npm install --save response-router".