5

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にスクリプトを添付します。そしてまたreactreact-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

答えて

6

あなた

window.Router = window.ReactRouter; 

は、使用しようとしているので、あなたがエラーを取得している

window.Router = window.ReactRouter.Router; 

する必要があります<Router />Routerはリアクタ・ルータ・ライブラリへの参照です(Routerコンポーネントではありません)。

+0

はい、そうです。しかし、このルータのlibは私にいくつかのクレイジーなURL 'localhost /#/?_ k = gt80ji'を生成します。馬鹿馬鹿しい。彼らのドキュメントには何も書かれていません。 – Green

+0

@Green https://github.com/rackt/react-router/blob/master/docs/guides/basics/Histories.md#what-is-that-_kckuvup-junk-in-the-url –

関連する問題