React路由器與React v0.14.3

我正在使用React和Material-UI創建一個應用程序，我也包括了React-router。但我得到下面的錯誤（Uncaught TypeError：（0，_reactDom.ReactDOM）不是函數）當我運行我的應用程序。React路由器與React v0.14.3

我使用的陣營v0.14.3並作出反應，路由器V1.0.2

BodyComponent我已經寫在不同的文件，我將其導入到我main.js

我試圖ReactDOM.render但我獲取以下錯誤

未捕獲錯誤：不變違例：元素類型無效：預期爲字符串（對於內置組件）或類/函數（對於複合組件），但得到：對象。

我創建搗鼓相同：

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

下面是我的代碼：（更新代碼）

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

下面是我的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" 
    }

來源

2015-12-11 Sharath Bangera

ReactDOM.render(...)

你只是錯過了渲染調用

來源

2015-12-11 13:00:18

嘿，當我使用.render我得到這些錯誤：未捕獲的錯誤：不變違規：元素類型無效：期望一個字符串（對於內置組件）或一個類/函數（對於複合組件），但得到：object。 –

看起來錯誤在渲染路徑的更深處，我會重新檢查React-Router的文檔，然後去除所有組件。讓他們只是爲了呈現一個跨度，當它工作，然後加回你的組件。跟蹤渲染圖有更好的方法，但這是最簡單的概念。 –

我想你忘了打電話的render方法。

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

來源

2015-12-11 13:00:24 juandemarco

嘿，當我這樣做，我得到這個錯誤（忘記提及它在我的問題）：未捕獲錯誤：不變違規：元素類型無效：期望一個字符串（對於內置組件）或一個類/函數）但得到了：對象。 –

你試過用'component'替換'handler'嗎？ – juandemarco

@juandermarco你能告訴我怎麼做嗎？我第一次使用反應和yeoman。 –

有兩個問題，我在這裏看到：

由於以前的答案表明，你需要一個ReactDOM.render(...)電話。
您所看到的錯誤指的是導入未按照您引用的方式導出的內容。確保您正確導出和導入組件，即在組件文件中，導出BodyComponent，導入並將其用作BodyComponent。希望my older answer可以幫助！

來源

2015-12-11 13:27:40

1.我正在使用.render。 2）BodyComponent被正確導出。沒有路由器，我可以在瀏覽器中顯示我的Bodycomponent。你可以通過我分享的jsfiddle。 –

你可以讓你的'BodyComponent.jsx'中的代碼成爲你的問題的一部分，所以我們可以看到整個圖片？它如何導出？ –

@JanKimo：更新它。 –

你有錯進口：

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

必須

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

來源

2016-02-08 08:18:16 ikhilko

你忘了渲染方法ReactDom.render()

來源

2016-05-26 07:36:46

React路由器與React v0.14.3

回答

相關問題