未捕获的类型错误:无法读取未定义的属性“createRouteFromReactElement" [英] Uncaught TypeError: Cannot read property 'createRouteFromReactElement' of undefined

问题描述

我收到此错误:-
未捕获的类型错误:无法读取未定义的属性createRouteFromReactElement"
在这段代码中.我使用路由器进行导航但不工作.我导入了一个名为 Home.jsx 的文件

 var React = require('react')var ReactDOM = require('react-dom')var Router = require('react-router').Routervar Route=Router.Routevar IndexRoute = Router.IndexRoutevar App = React.createClass({使成为() {返回 (<div><p>App</p><ul><li>关于</li>

)}})var About = require('./components/Home')ReactDOM.render((<路由器><Route path="/" component={App}><IndexRoute path="/about" component={About}/></路线></路由器>), document.body)

和 Home.jsx

var React = require('react');var RaisedButton = require('material-ui/lib/raised-button');var Home = React.createClass({渲染:函数(){返回 (<RaisedButton label="默认"/>);},});module.exports = 主页；

解决方案

您在这里做错了一些事情.我假设您使用的是 React Router 1.0(因为使用了 IndexRoute).

在 1.0 版中，Router 组件是顶级模块的一个属性，因此您将如何进行导入:

var ReactRouter = require('react-router');var Router = ReactRouter.Router;var Route = ReactRouter.Route;var IndexRoute = ReactRouter.IndexRoute;

我想你也没有完全理解 IndexRoute 是什么，看看 在文档中 进行说明.但是 tldr;是 IndexRoute 不接受路径参数.

另一件事是将你的路由组件安装在你需要指定的地方，你可以使用 {this.props.children} 来完成.所以你可能看起来像:

var React = require('react');var ReactDOM = require('react-dom');var ReactRouter = require('react-router');var Router = ReactRouter.Router;var Route = ReactRouter.Route;var IndexRoute = ReactRouter.IndexRoute;var App = React.createClass({使成为() {返回 (<div><p>App</p>{this.props.children}

)}})var About = require('./components/Home')ReactDOM.render((<路由器><Route path="/" component={App}><IndexRoute 组件={关于}/></路线></路由器>), document.body)

请查看介绍文档以便您更好地了解如何在您的应用中使用 react router.

I am getting this error :-
Uncaught TypeError: Cannot read property 'createRouteFromReactElement' of undefined
in this code. I used Router for navigation but not working. I imported a file called Home.jsx

    var React = require('react')
    var ReactDOM =  require('react-dom')
    var Router = require('react-router').Router
    var Route= Router.Route
    var IndexRoute = Router.IndexRoute 

    var App = React.createClass({
      render() {
        return (
          <div>
            <p>App</p>
            <ul>
              <li>About</li>
            </ul>
          </div>
        )
      }
    })

var About = require('./components/Home')

ReactDOM.render((
  <Router>
    <Route path="/" component={App}>
      <IndexRoute path="/about" component={About} />
    </Route>
  </Router>
), document.body)

and Home.jsx

var React = require('react');
var RaisedButton = require('material-ui/lib/raised-button');

var Home = React.createClass({
  render:function() {
    return (
        <RaisedButton label="Default" />
    );
  },
});

module.exports = Home;

解决方案

There are a few things which you are doing wrong here. I'm assuming you are using React Router 1.0 (because of use of IndexRoute).

In version 1.0 Router component is a property of the top-level module, so this is how you would do your imports:

var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var IndexRoute = ReactRouter.IndexRoute;

I think you also not fully understand what IndexRoute is, have a look in the docs for the clarification. But the tldr; is that the IndexRoute does not take the path argument.

Another thing is that to mount your routes components somewhere you need to specify where, and you can do it with use of {this.props.children}. So your could could look like:

var React = require('react');
var ReactDOM = require('react-dom');
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var IndexRoute = ReactRouter.IndexRoute;

var App = React.createClass({
  render() {
    return (
      <div>
        <p>App</p>
        {this.props.children}
      </div>
    )
  }
})

var About = require('./components/Home')

ReactDOM.render((
  <Router>
    <Route path="/" component={App}>
      <IndexRoute component={About} />
    </Route>
  </Router>
), document.body)

Please have a look at the Introduction docs so you will better understand how to use react router in your app.

这篇关于未捕获的类型错误:无法读取未定义的属性“createRouteFromReactElement"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！