如何修复ReactRouter错误“Uncaught Invariant Violation：元素类型无效”？

Question

我已经试过这个教程ReactRouter：https://www.kirupa.com/react/creating_single_page_app_react_using_react_router.htm

演示页和完整的源代码是在这里（JS是在HTML文件）：https://www.kirupa.com/react/examples/react_router_final.htm

当我试图实现类似的东西，我得到错误：

Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `ComponentRoot`. 

我注意到，当我改变了Kirupa的演示应用程序（在上面的链接完整的源代码）的反应，巴贝尔版本号为：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.0/react.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.0/react-dom.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/4.0.0-0/react-router.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.19.0/babel.min.js"></script> 

我在这个演示程序中遇到同样的错误。所以React或Babel版本的变化导致了这个问题。

我该如何修复此演示应用程序以使用React和Babel的新版本？

Answer 1

本教程似乎覆盖了react-router@2.x.x，并且您使用了react-router@4.x.x，它使用不同的方法和API完全重写。

使用v2与教程中描述的API匹配或使用v4的文档（https://react-router.now.sh/）。 请注意，v4仍处于alpha版本。