我正在摆弄react-router
,试图实现简单的路由.我在他们的例子中写了我的代码(但没有import
s)https://github.com/rackt/react-router#whats-it-look-like.
我在浏览器中收到此错误:
未捕获错误:不变违规:元素类型无效:期望一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到:object.
这就是我的工作.
我在页面上附加脚本,ReactRouter.min.js
我的代码在react-routes.js
.而且还react
和react-dom
和jQuery(所有三个app.js
):
这是我的react-router.js
,尚未编译:
'use strict'; window.Router = window.ReactRouter; window.Link = window.ReactRouter.Link; window.Route = window.ReactRouter.Route; const Foo = React.createClass({ render() { return () } }); ReactDOM.render((HELLO, me FOO
), document.getElementById('content-section'))
这是我react-router.js
与Babel汇编后的.我在页面上正好附上了这个:
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'));
我做错了什么?为什么会抛出错误?路由器是一个对象,而不是React组件.为什么?我看一下这个例子并以同样的方式输入我的代码https://github.com/rackt/react-router#whats-it-look-like
您的
window.Router = window.ReactRouter;
应该
window.Router = window.ReactRouter.Router;
您正在尝试使用错误
,但是它Router
是对React Router库(而不是Router
组件)的引用.