2016-08-31 7 views
0

私はReact.jsとReact-Routerのチュートリアル(here)に従おうとしていますが、サンプルコードは機能しません。私は何が間違っているのか分かりません。Reactチュートリアルの後にエラーが表示される

これは私のコードです。 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).警告が表示され、Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.エラーが発生します。

どうなりますか?

import React from 'react'; 
import Bootstrap from 'bootstrap/dist/css/bootstrap.css'; 
import ReactDOM from 'react-dom'; 
import Router from 'react-router'; 
import { DefaultRoute, Link, Route, IndexRoute, RouteHandler } from 'react-router'; 
import 'whatwg-fetch'; 

var MainLayout = React.createClass({ 
    render: function() { 
    // Note the `className` rather than `class` 
    // `class` is a reserved word in JavaScript, so JSX uses `className` 
    // Ultimately, it will render with a `class` in the DOM 
    return (
     <div className="app"> 
     <header className="primary-header"></header> 
     <aside className="primary-aside"></aside> 
     <main> 
      {this.props.children} 
     </main> 
     </div> 
    ); 
    } 
}); 

var SearchLayout = React.createClass({ 
    render: function() { 
    return (
     <div className="search"> 
     <header className="search-header"></header> 
     <div className="results"> 
      {this.props.children} 
     </div> 
     <div className="search-footer pagination"></div> 
     </div> 
    ); 
    } 
}); 

var UserList = React.createClass({ 
    render: function() { 
    return (
     <ul className="user-list"> 
     <li>Dan</li> 
     <li>Ryan</li> 
     <li>Michael</li> 
     </ul> 
    ); 
    } 
}); 

var Home = React.createClass({ 
    render: function() { 
    return (
     <p>Welcome to the site</p> 
    ); 
    } 
}); 

ReactDOM.render((
    <Router> 
    <Route component={MainLayout}> 
     <Route path="/" component={Home} /> 
     <Route component={SearchLayout}> 
     <Route path="users" component={UserList} /> 
     <Route path="search" component={SearchLayout} /> 
     </Route> 
    </Route> 
    </Router> 
), document.getElementById('root')); 

答えて

1

は、私の知る限り見るように、反応し、ルータをAPIは、チュートリアルを公開の日から変更されたと今は

import { Router } from 'react-router' 

代わりの

import Router from 'react-router' 

か、単に追加を使用する必要がありますRouterと「反応ルータ」からの他のインポートとの行へ

import { Router, DefaultRoute, Link, Route, IndexRoute, RouteHandler } from 'react-router' 
関連する問題