如何修復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版本。