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

回答

相关问题