未捕获的类型错误：无法读取未定义的属性“createRouteFromReactElement”

IT技术 reactjs react-router
2021-05-21 05:13:48

我收到此错误：-
未捕获的类型错误：无法读取
此代码中未定义的属性“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;
1个回答

有几件事你在这里做错了。我假设您使用的是 React Router 1.0（因为使用了IndexRoute）。

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

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 路由器。

其它你可能感兴趣的问题
上一篇使用props和状态将选择框的值传递给子组件 React.JS 下一篇react：菜单+子菜单+内容