Как исправить ошибку ReactRouter «Неоткрытое инвариантное нарушение: тип элемента недействителен»?

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 вызывает эту проблему.

Как я могу исправить это демо-приложение для работы с версией «Реакт» и «Вавилон» в новостном номере?

Answer 1

Этот учебник, как представляется, охватывает react-router@2.x.x, и вы использовали react-router@4.x.x, который полностью переписывается с различным подходом и API.

Используйте v2 для соответствия API, описанному в учебнике, или используйте документы для v4 (https://react-router.now.sh/). Обратите внимание, что v4 все еще находится в альфе.