【问题标题】:react-router createElement and render failreact-router createElement 和渲染失败
【发布时间】:2016-03-10 12:06:04
【问题描述】:

我正在探索 react-router 并遇到了一个非常基本的问题。令人沮丧的部分是我在另一个应用程序中使用 react-router,它工作正常!!。

我在控制台中收到此错误。我在这里错过了什么?

警告:React.createElement:类型不应为 null、未定义、布尔值或数字。它应该是一个字符串(对于 DOM 元素)或一个 ReactClass(对于复合组件)。

Uncaught Invariant Violation:元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件),但得到:对象。

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'));

【问题讨论】:

    标签: reactjs react-router


    【解决方案1】:

    需要导入Router

    var Router = require('react-router').Router
    

    【讨论】:

      猜你喜欢
      • 2020-12-18
      • 2016-02-22
      • 2019-01-02
      • 2016-06-13
      • 2023-02-06
      • 1970-01-01
      • 1970-01-01
      • 2016-03-26
      • 2018-09-20
      相关资源
      最近更新 更多