反应路由器 createElement 和渲染失败
react-router createElement and render fail
我正在探索 react-router 和 运行 一个非常基本的问题。令人沮丧的是我在另一个应用程序中使用了 react-router,它工作正常!!
我在控制台中收到此错误。我在这里错过了什么?
警告:React.createElement:类型不应为空、未定义、布尔值或数字。它应该是一个字符串(对于 DOM 元素)或一个 ReactClass(对于复合组件)。
未捕获的不变违规:元素类型无效:应为字符串(对于内置组件)或 class/function(对于复合组件)但得到:对象。
var React = require('react');
var ReactDOM = require('react-dom');
var Router = require('react-router');
var Route = require('react-router').Route;
var hashHistory = require('react-router').hashHistory;
var App = React.createClass({
render: function() {
return <div>App Rendered from React Router!</div>
}
});
//this works - there is nothing wrong with App component
// ReactDOM.render((
// <App/>
// ), document.getElementById('app'));
//This works - just so I understand the basics
// var Child = React.createElement('div',{className:'child'});
// var Parent = React.createElement('div',{className:'parent'},Child);
// ReactDOM.render(Parent, document.getElementById('app'));
//this doesn't work - copy pasted from tutorial
ReactDOM.render((
<Router history={hashHistory}>
<Route path="/" component={App}/>
</Router>
), document.getElementById('app'));
//Babel transpiled code
// ReactDOM.render(React.createElement(
// Router,
// { history: hashHistory },
// React.createElement(Route, { path: '/', component: App })
// ), document.getElementById('app'));
//this doesn't work
// var route = React.createElement(Route, { path: '/', component: App });
// var router = React.createElement(Router,{ history: hashHistory });
//
// ReactDOM.render(router, document.getElementById('app'));
您需要导入 Router
例如
var Router = require('react-router').Router
我正在探索 react-router 和 运行 一个非常基本的问题。令人沮丧的是我在另一个应用程序中使用了 react-router,它工作正常!!
我在控制台中收到此错误。我在这里错过了什么?
警告:React.createElement:类型不应为空、未定义、布尔值或数字。它应该是一个字符串(对于 DOM 元素)或一个 ReactClass(对于复合组件)。
未捕获的不变违规:元素类型无效:应为字符串(对于内置组件)或 class/function(对于复合组件)但得到:对象。
var React = require('react');
var ReactDOM = require('react-dom');
var Router = require('react-router');
var Route = require('react-router').Route;
var hashHistory = require('react-router').hashHistory;
var App = React.createClass({
render: function() {
return <div>App Rendered from React Router!</div>
}
});
//this works - there is nothing wrong with App component
// ReactDOM.render((
// <App/>
// ), document.getElementById('app'));
//This works - just so I understand the basics
// var Child = React.createElement('div',{className:'child'});
// var Parent = React.createElement('div',{className:'parent'},Child);
// ReactDOM.render(Parent, document.getElementById('app'));
//this doesn't work - copy pasted from tutorial
ReactDOM.render((
<Router history={hashHistory}>
<Route path="/" component={App}/>
</Router>
), document.getElementById('app'));
//Babel transpiled code
// ReactDOM.render(React.createElement(
// Router,
// { history: hashHistory },
// React.createElement(Route, { path: '/', component: App })
// ), document.getElementById('app'));
//this doesn't work
// var route = React.createElement(Route, { path: '/', component: App });
// var router = React.createElement(Router,{ history: hashHistory });
//
// ReactDOM.render(router, document.getElementById('app'));
您需要导入 Router
例如
var Router = require('react-router').Router