Reaktuj router z React v0.14.3

Question

Tworzę aplikację przy użyciu React i Material-UI, dołączam również React-router. Ale pojawia się poniższy błąd (Uncaught TypeError: (0, _reactDom.ReactDOM) nie jest funkcją) kiedy uruchamiam moją aplikację.

Używam React v0.14.3 i React-Router v1.0.2

BodyComponent Pisałem w innym pliku i zaimportować go do moich main.js

próbowałem ReactDOM.render ale uzyskać poniżej błędu

Błąd niezamierzony: naruszenie niezmiennicze: typ elementu jest nieprawidłowy: oczekiwano ciągu znaków (dla wbudowanych składników) lub klasy/funkcji (dla komponentów złożonych), ale otrzymano: obiekt.

Stworzyłem skrzypce na ten sam:

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

Poniżej jest mój kod: (aktualizacja 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')) 

Poniżej moje zależności package.json

"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(...)

Po prostu brakowało połączenia renderowania

Answer 2

Chyba zapomniał wywołać metodę render.

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

Answer 3

Istnieją dwa problemy widzę tutaj:

1. jak w poprzedniej odpowiedzi sugerują, musisz się ReactDOM.render(...) połączenia.
2. Błąd, który widzisz, dotyczy importowania czegoś, co nie zostało wyeksportowane w sposób, w jaki się do niego odwołujesz. Upewnij się, że poprawnie eksportujesz i importujesz komponent, tj. W pliku komponentu, eksportujesz BodyComponent, importujesz i używasz go jako BodyComponent. Hope my older answer może pomóc!

Answer 4

Masz błędne Import:

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

musi być

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

Answer 5

Zapomniałaś tynku metodą ReactDom.render()