未捕获的TypeError:无法读取未定义的属性"createRouteFromReactElement"

Question

我收到此错误: -
未捕获TypeError:无法读取
此代码中未定义的属性'createRouteFromReactElement' .我使用路由器进行导航但没有工作.我导入了一个名为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)

和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;

Answer 1

这里有一些你做错的事情.我假设您正在使用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({
  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)

请查看简介文档,以便您更好地了解如何在应用中使用react路由器.