不変の違反：ルートルートは反応ルータ2の動的ルーティングで単一の要素エラーを返す必要があります

Question

私は単純なHello Worldアプリケーションを1つのルートに持ち、子ルートもインデックスルートもありません。 jsx sysntaxの代わりにplain routesを使用するルーティングiの場合。再び私は反応ルータのdynamic routingを使用して、webpackでHelloコンポーネントを読み込みます。 私ののapp.jsxファイルのコードは、です。

import React from "react"; 
import ReactDOM from "react-dom"; 
import {Router, browserHistory} from "react-router"; 
import Hello from "./components/Hello"; 



const routes = [{ 
    path:"/", 
    getComponents(location, callback) { 
     require.ensure([], function (require) { 
      callback(null, require('./components/Hello')) 
     }) 
    } 
}]; 


ReactDOM.render(
    <Router history={browserHistory} routes={routes}/>, 
    document.getElementById("container") 
); 

Hello.jsxコンポーネントはWebPACKのはES6モジュール

あなたが使用ES6コードをtranspileするバベルを使用している場合をサポートしていないため、このエラーが発生し、次のコード

import React from "react"; 
export default class Hello extends React.Component { 

    render() { 

     return (
      <h2>Hello World</h2> 
     ) 
    } 
} 

Answer 1

を持っていますデフォルトキーワードは

require('./components/Hello').default 

です経路は

const routes = [{ 
    path:"/", 
    getComponents(location, callback) { 
     require.ensure([], function (require) { 
      callback(null, require('./components/Hello').default) 
     }) 
    } 
}];