So beheben Sie den ReactRouter-Fehler "Uncaught Invariant Violation: Elementtyp ist ungültig"?

Question

ich dieses Tutorial auf ReactRouter versucht haben: https://www.kirupa.com/react/creating_single_page_app_react_using_react_router.htm

Die Demo-Seite und vollständige Quellcode ist hier (JS ist in der HTML-Datei): https://www.kirupa.com/react/examples/react_router_final.htm

Wenn ich versuche, etwas zu implementieren ähnliche ich Fehler:

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`. 

ich bemerkte, dass, wenn ich geändert, um die Reaktion und Babel Version in dem (Code vollständiger Quelle in dem obigen Link) Kirupa der Demo-Anwendung, zu:

<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> 

Ich bekomme den gleichen Fehler in dieser Demo-App. Daher verursacht die React- oder Babel-Versionsänderung dieses Problem.

Wie kann ich diese Demo-App reparieren, um mit der neuen Version von React und Babel zu arbeiten?

Answer 1

Dieses Tutorial scheint react-router@2.x.x zu decken und Sie react-router@4.x.x verwendet, die komplett mit anderen Ansatz und API neu geschrieben wird.

Verwenden Sie die v2, um mit der im Lernprogramm beschriebenen API übereinzustimmen, oder verwenden Sie die Dokumentation für v4 (https://react-router.now.sh/). Beachten Sie, dass v4 immer noch in Alpha ist.