Reagieren Router mit Reagieren v0.14.3

Question

Ich erstelle eine App mit React und Material-UI, ich habe auch den React-Router aufgenommen. Aber ich bekomme den folgenden Fehler (Uncaught TypeError: (0, _reactDom.ReactDOM) ist keine Funktion), wenn ich meine App ausführen.

IREACT v0.14.3 bin mit und React-Router v1.0.2

BodyComponent Ich habe in einer anderen Datei geschrieben und ich importieren es meinem main.js

ich ReactDOM.render versucht, aber ich Fehler unter

Uncaught Fehler: Invariant Violation: Elementtyp ist ungültig: erwartet eine Zeichenfolge (für integrierte Komponenten) oder eine Klasse/Funktion (für Composite-Komponenten) aber erhalten: Objekt.

Ich habe Geige für das gleiche Erstellt:

https://jsfiddle.net/69z2wepo/23814/

Unten ist mein Code: (aktualisierte Code)

'use strict'; 
import React from 'react'; 
import mui from 'material-ui'; 
import PhysicalView from './playground/PhysicalViewComponent'; 
import DataTable from './DataTableComponent'; 
const AppBar = require('material-ui/lib/app-bar'); 
require('styles//Body.sass'); 

const LeftNav = require('material-ui/lib/left-nav'); 

const MenuItem = mui.MenuItem; 
const injectTapEventPlugin = require('react-tap-event-plugin'); 
injectTapEventPlugin(); 


var menuItems = [{ 
    route: 'device-view', 
    text: 'Device' 
}, { 
    type: MenuItem.Types.SUBHEADER, 
    text: '123' 
}, { 
    route: 'ola', 
    text: 'ola' 
}, { 
    route: 'bridges', 
    text: 'Bridges' 
}, { 
    route: 'interf', 
    text: 'interf' 
}, { 
    type: MenuItem.Types.LINK, 
    payload: 'https://github.com/callemall/material-ui', 
    text: 'GitHub' 
}, { 
    text: 'Disabled', 
    disabled: true 
}, { 
    type: MenuItem.Types.LINK, 
    payload: 'https://www.google.com', 
    text: 'Disabled Link', 
    disabled: true 
}]; 


class BodyComponent extends React.Component { 

    _toggleMenu() { 
    this.refs.leftNav.toggle(); 
    } 

    render() { 
    return (
     < div className = "body-component" > 

     <header> 

     < AppBar 
     title = "vEDM"onLeftIconButtonTouchTap = { 
      this._toggleMenu.bind(this) 
     } 
     iconClassNameRight = "muidocs-icon-navigation-expand-more"/> 

     < /header> 

     < LeftNav 
     ref = "leftNav" 
     docked = { 
     false 
     } 
     //openRight = { true } 
     menuItems = { 
     menuItems 
     } 
     /> 

    <DataTable /> 


    < /div> 
); 
} 
} 

BodyComponent.displayName = 'BodyComponent' 

export default BodyComponent; 

main.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import mui from 'material-ui'; 
import Body from './BodyComponent'; 
import Router from 'react-router'; 
import Route from 'react-router'; 
import createBrowserHistory from 'history/lib/createBrowserHistory'; 
let history = createBrowserHistory(); 


ReactDOM.render((
    <Router history={history}> 
     <Route path="/" component={Body} /> 
    </Router> 
), document.getElementById('app')) 

Nachfolgend finden meine package.json Abhängigkeiten

"dependencies": { 
    "history": "^1.13.1", 
    "lodash": "^3.10.1", 
    "material-ui": "^0.13.4", 
    "normalize.css": "^3.0.3", 
    "react": "^0.14.0", 
    "react-addons-test-utils": "^0.14.0", 
    "react-dom": "^0.14.0", 
    "react-router": "^1.0.2", 
    "react-tap-event-plugin": "^0.2.1", 
    "vis": "^4.10.0" 
    } 

Answer 1

ReactDOM.render(...)

Sie verfehlten nur den Anruf machen

Answer 2

Ich glaube, Sie die render Methode aufzurufen vergessen.

ReactDOM.render((
    <Router history={history}> 
     <Route path="/" handler={Body} /> 
    </Router> 
), document.getElementById('app')) 

Answer 3

Es gibt zwei Probleme, die ich hier zu sehen:

1. Da die bisherigen Antworten vorschlagen, benötigen Sie einen ReactDOM.render(...) Anruf.
2. Der Fehler, den Sie sehen, bezieht sich darauf, etwas zu importieren, das nicht so exportiert wurde, wie Sie es nennen. Stellen Sie sicher, dass Sie Ihre Komponente korrekt exportieren und importieren, z. B. in Ihre Komponentendatei, exportieren Sie BodyComponent, importieren und verwenden Sie sie als BodyComponent. Hoffnung my older answer kann helfen!

Answer 4

Sie haben falsche Importe:

import Router from 'react-router'; 
import Route from 'react-router'; 

import { Router, Route } from 'react-router'; 

Answer 5

Sie die Render ReactDom.render() Methode

vergessen sein muss