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是什么，请查看in the docs进行澄清。但是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)

请查看Introduction docs，以便您更好地了解如何在应用中使用react路由器。

未捕获的TypeError：无法读取未定义的属性“createRouteFromReactElement”

1 个答案: