react-router
で簡単なルーティングを実装しようとしています。私は自分のコードを自分の例で書かれているようにタイプします(但し、import
ではなく)https://github.com/rackt/react-router#whats-it-look-likeです。未知のエラー:不変の違反:要素の種類が無効です。オブジェクト
そして私は、ブラウザにこのエラーが表示されます。ここでは
Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
は、私が何をすべきかです。
ReactRouter.min.js
と私のコードreact-routes.js
にスクリプトを添付します。そしてまたreact
とreact-dom
とjQuery(app.js
内のすべての3):
<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>
ここでは私の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 (
<div>
<h1>HELLO, me FOO</h1>
</div>
)
}
});
ReactDOM.render((
<Router>
<Route path="/" >
<Route path="/page/one" component={Foo}/>
</Route>
</Router>
), document.getElementById('content-section'))
これはバベルとコンパイル後の私react-router.js
です。私は、まさにこのページの添付:
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'));
私が間違って何をしますか?なぜエラーがスローされるのですか?ルータはオブジェクトであり、反応コンポーネントではありません。どうして?私はこの例を見て、自分のコードを入力するのと同じ方法をhttps://github.com/rackt/react-router#whats-it-look-like
はい、そうです。しかし、このルータのlibは私にいくつかのクレイジーなURL 'localhost /#/?_ k = gt80ji'を生成します。馬鹿馬鹿しい。彼らのドキュメントには何も書かれていません。 – Green
@Green https://github.com/rackt/react-router/blob/master/docs/guides/basics/Histories.md#what-is-that-_kckuvup-junk-in-the-url –