Question

我已经阅读了大部分类似的问题，我似乎无法找到合适的答案。

我一直在关注this tutorial并且必须将路由器包括在我们的应用程序中。）其中要求确保一切正常并继续，但是，当我运行应用程序时，我没有输出（预期的是＆＃34; Hello world＆＃34;。

在Chrome中查看控制台时出现错误

bundle.js:1003 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

编辑 - 其他错误信息

错过了其他错误消息（窗口大小意味着它们显示在屏幕外。

`bundle.js:1003 Warning: Failed prop type: The prop `history` is marked as required in `Router`, but its value is `undefined`. in Router`

和

Uncaught TypeError: Cannot read property 'location' of undefined

这两个都会生成sstack跟踪但指向生成的bundle.js中的位置

结束编辑 - 其他错误信息

现在我已将我的代码检查到教程中的代码，看起来我已经完成了所有相同的操作。我在进口和出口方面看到了（尽我所能），它们看起来很好。所以我不知道需要改变什么。

我的代码：

routes.js

import React from 'react';
import { Route, IndexRoute } from 'react-router';
import App from './components/app';

export default (
  <Route path='/' component={App}>
    <IndexRoute component={App} />
  </Route>
);

app.js

import React,  {Component} from "react";

export default class App extends Component {
  render() {
    return (
      <div>
        Hello World 
      </div>
    );
  }
}

index.js

import React from 'react';
import ReactDom from 'react-dom';
import { Router, browserHistory } from 'react-router';
import routes from './routes';

import App from './components/app';
ReactDom.render(<Router history={browserHistory} routes={routes} />, document.querySelector('#app'));

的index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Journey into React</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
  </body>
</html>

非常感谢任何帮助。

Answer 1

您的代码似乎没问题，除了您不需要将App作为Route和IndexRoute（你在这里误解了一些东西）

用＆gt;

替换您的routes.js

export default (
    <Route path='/' component={App} />
);

我不知道这是否能解决你的问题，如果你提供一个你的例子，我可以进一步深入探讨：）

到达路由器警告：React.createElement：类型无效

1 个答案: