2016-04-10 14 views
4

RouteHandlerを正しくインポートするのに問題があります。私はこの警告が消えるとナビゲーションバーがレンダリング<RouteHandler />を削除した場合React-Router RouteHandler Undefined

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of App .

:私はエラーを得続ける

var React = require('react'); 
var ReactDOM = require('react-dom'); 
var ReactRouter = require('react-router'); 
var ActivityView = require('./ActivityView'); 

var Router = ReactRouter.Router; 
var Route = ReactRouter.Route; 
var Link = ReactRouter.Link; 
var RouteHandler = ReactRouter.RouteHandler; 
var hashHistory = ReactRouter.hashHistory; 
var IndexRoute = ReactRouter.IndexRoute; 

var App = React.createClass({ 
    render: function() { 
     return (
      <div> 
       <div className="navbar navbar-default"> 
        <ul className="nav navbar-nav navbar-right"> 
         <li><Link to="app">Dashboard</Link></li> 
        </ul> 
       </div> 

       <RouteHandler /> 
      </div> 
     ); 
    } 
}); 

ReactDOM.render(
    <Router history={hashHistory}> 
     <Route name="app" path="/" component={App}> 
      <IndexRoute component={ActivityView} /> 
     </Route> 
    </Router>, 
    document.getElementById('content') 
); 

:これは私のコードです。ここでRouteHandlerを間違ってインポートしていますか?

+0

でも、私は同じソリューションを探していた、このつまずい:https://github.com/reactjs/react-router/blob/master/upgrade-guides/v1.0.0.md#routehandler –

答えて

11

upgrading guide

内のセクションによるとRouteHandlerがなくなっています。ルータはアクティブルートに基づいてコンポーネントのthis.props.childrenを自動的に入力します。他のすべてと同様に

// v0.13.x 
<RouteHandler/> 

// v1.0 
{this.props.children} 

あなたの供給の子供に追加小道具を注入するために、標準React.cloneElementパターンを使用することができ、自分の親から子どもを受けるコンポーネントが反応します。

通常、このパターンは過度に使用しないでください。これは、ルーティングツリーではなくレンダーツリーを使用してルートコンポーネントを強く結合するため、リファクタリングを難しくする可能性があります。

Link to complete Documentation

+0

回答ありがとうございました –

+0

あなたのリンクを更新できますか? – Ian

関連する問題