はReactRouterを必要とした後、JSエラーに反応 - 警告：React.createElement：タイプがnullであってはならない、未定義、ブール値、または数

Question

私はすべての異なるチュートリアルはES5/ES6を使用して、現時点でReactJSを習得しようとしていると、すべてのよReactのバージョンの他の違いは、それほど言わないと少しイライラします。誰かが以下のコードがコンソールに次のエラーを投げる理由を誰にも見られますか？

エラーメッセージ：

警告：React.createElement：タイプは、ヌル未定義、ブール、または数値ではありません。

未知の不変的な違反：要素タイプが無効です：文字列が期待されています（組み込みコンポーネントの場合）またはクラス/関数（複合コンポーネントの場合）が必要です（DOM要素の場合は文字列、複合コンポーネントの場合はReactClass）。 ）しかし、持っている：オブジェクト。

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Router, Route, Navigation } from 'react-router' 


/* 
    Main App layout 
*/ 

var App = React.createClass ({ 
    render: function() { 
     return (
      <div className="catch-of-the-day"> 
       <div className="menu"> 
        <Header tagline="Seafood and Eat it!"/> 
       </div> 
       <Order/> 
       <Inventory/> 
      </div> 
     ) 
    } 
}); 


/* Header */ 

var Header = React.createClass ({ 
    render: function() { 
     return (
      <header className="top"> 
       <h1>Catch 
       <span className="ofThe"> 
        <span className="of">of</span> 
        <span className="the">the</span> 
       </span> 
        day</h1> 
       <h3><span>{this.props.tagline}</span></h3> 
      </header> 
     ) 
    } 
}); 

/* Order */ 

var Order = React.createClass ({ 
    render: function() { 
     return (
      <p>Order</p> 
     ) 
    } 
}); 

/* <Inventory/> */ 

var Inventory = React.createClass ({ 
    render: function() { 
     return (
      <p>Inventory</p> 
     ) 
    } 
}); 


/* 
    Store Picker 
    This will let us make <StorePicker/> 
*/ 

var StorePicker = React.createClass ({ 
    render: function() { 
     return (
      <form className="store-selector"> 
       <h2>Please enter a store</h2> 
       <input type="text" ref="storeId" /> 
       <input type="submit" /> 
      </form> 
     ) 
    } 
}); 

/* 
    Routes 
*/ 

var Routes = (
    <Router> 
     <Route path="/" component={StorePicker} /> 
     <Route path="/store/:storeid" component={App} /> 
    </Router> 
) 

ReactDOM.render(<Routes/>, document.querySelector('#main')); 

Answer 1

この試してみてください：あなたは私たちを見るのコードは、あなたがあなたのコンポーネントのStorePickerとアプリケーションをインポートする方法が含まれていませんが、私は

component="{App}" 

を書くことであることを伝えることができます

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Router, Route, Navigation } from 'react-router' 


ReactDOM.render(
    <Router> 
     <Route path="/" component={StorePicker} /> 
     <Route path="/store/:storeid" component={App} /> 
    </Router>, 
    document.querySelector('#main')); 

Answer 2

を文字列をパラメータとしてRouteコンポーネントに渡してコンポーネントを渡す場合は、次のように記述してください。

<Route path="/store/:storeid" component={App} /> 

希望すると、これが役立ちます。

Answer 3

[OK]を問題は、私は実際にそれを正しくレンダリングされませんでした、私のルータコンポーネントで、以下の正しいコード築く：

/* ルート */

VARルートを= React.createClassは（{ レンダリング：関数（）{ リターン（ ）; }}）。

ReactDOM.render（document.querySelector（ '＃メイン'））;