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"
}
React Router is a standard library for routing in React. It enables the navigation among views of various components in a React Application, allows changing the browser URL, and keeps the UI in sync with the URL.
To install React Router, all you have to do is run npm install react-router-dom@6 in your project terminal and then wait for the installation to complete. If you are using yarn then use this command: yarn add react-router-dom@6 .
v6.4 is our most exciting release yet with new data abstractions for reads, writes, and navigation hooks to easily keep your UI in sync with your data. The new feature overview will catch you up.
If you are writing an application that will run in the browser, you should instead install react-router-dom . Similarly, if you are writing a React Native application, you should instead install react-router-native . Both of those will install react-router as a dependency.
ReactDOM.render( ... )
You just missed the render call
I think you forgot to call the render
method.
ReactDOM.render((
<Router history={history}>
<Route path="/" handler={Body} />
</Router>
), document.getElementById('app'))
There are two problems I see here:
ReactDOM.render( ... )
call.BodyComponent
, import and use it as BodyComponent
. Hope my older answer can help!If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With