React Router with React v0.14.3

5
votes

I am creating an app using React and Material-UI, i have included the React-router as well. But i get the below error (Uncaught TypeError: (0 , _reactDom.ReactDOM) is not a function) when i run my App.

I am using React v0.14.3 and React-Router v1.0.2

BodyComponent i have written in a different file and i import it to my main.js

I tried ReactDOM.render but i get below error

Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

I have Created fiddle for the same :

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

Below is my code : (updated 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'))

Below is my package.json dependencies

"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"
  }
5
javascriptreactjsreact-routerreact-jsxreact-routing

5 Answers

3
votes

ReactDOM.render( ... )

You just missed the render call

3
votes

I think you forgot to call the render method.

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

There are two problems I see here:

  1. As the previous answers suggest, you'll need a ReactDOM.render( ... ) call.
  2. The error you're seeing refers to importing something that hadn't been exported the way you refer to it. Make sure you correctly export and import your component, i.e. in your component file, export BodyComponent, import and use it as BodyComponent. Hope my older answer can help!
0
votes

You have wrong imports:

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

must be 

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

You forgot the render method ReactDom.render()