Inactivity error: Invariant violation: element type is invalid: object

Question

I fiddled with react-router , binding to implementing simple routing. I am typing my code as written in their example (but without import s) https://github.com/rackt/react-router#whats-it-look-like .

And I get this error in the browser:

Unfixed error: invariant violation: element type is invalid: expected string (for built-in components) or class / function (for composite components), but received: object.

That's what I'm doing.

I am attaching scripts on the ReactRouter.min.js page and my code in react-routes.js . And also react and react-dom and jquery (all three in app.js ):

 <script src="/js/app.js" type="text/javascript" charset="utf-8"></script> <script src="https://npmcdn.com/react-router/umd/ReactRouter.min.js"></script> <script src="/js/react-routes.js" type="text/javascript" charset="utf-8"></script> 

Here is my react-router.js not yet compiled:

 'use strict'; window.Router = window.ReactRouter; window.Link = window.ReactRouter.Link; window.Route = window.ReactRouter.Route; const Foo = React.createClass({ render() { return ( <div> <h1>HELLO, me FOO</h1> </div> ) } }); ReactDOM.render(( <Router> <Route path="/" > <Route path="/page/one" component={Foo}/> </Route> </Router> ), document.getElementById('content-section')) 

This is my react-router.js after compiling with Babylon. I attach exactly this on the page:

babel --presets react -o public/js/react-routes.js assets/js/react-routes.js :

 'use strict'; window.Router = window.ReactRouter; window.Link = window.ReactRouter.Link; window.Route = window.ReactRouter.Route; const Foo = React.createClass({ displayName: "Foo", render() { return React.createElement( "div", null, React.createElement( "h1", null, "HELLO, me FOO" ) ); } }); // Error is thrown here, in this line ReactDOM.render(React.createElement( Router, null, React.createElement( Route, { path: "/" }, React.createElement(Route, { path: "/page/one", component: Foo }) ) ), document.getElementById('content-section')); 

How am I wrong? Why does an error occur? A router is an object, not a React component. What for? I look at this example and find my code also https://github.com/rackt/react-router#whats-it-look-like

Answer 1

Your

 window.Router = window.ReactRouter; 

it should be

 window.Router = window.ReactRouter.Router; 

You get an error because you are trying to use <Router /> , but Router is a reference to the React Router library (and not to the Router component).