使用 React v0.14.3 的 React 路由器

Question

我正在使用 React 和 Material-UI 创建一个应用程序，我也包含了 React-router。但是当我运行我的应用程序时，出现以下错误（Uncaught TypeError: (0 , _reactDom.ReactDOM) is not a function）。

我正在使用 React v0.14.3 和 React-Router 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"
  }

Answer 1

ReactDOM.render( ... )

你刚刚错过了渲染调用

Answer 2

我想你忘了调用render 方法。

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

Answer 3

我在这里看到两个问题：

1. 正如前面的答案所示，您需要拨打ReactDOM.render( ... )。
2. 您看到的错误是指导入了一些尚未按照您引用的方式导出的内容。确保正确导出和导入组件，即在组件文件中，导出BodyComponent，导入并用作BodyComponent。希望my older answer能帮上忙！

Answer 4

你有错误的导入：

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

必须是

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

Answer 5

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