Violazione invariante: la rotta principale deve eseguire il rendering di un singolo errore nell'instradamento dinamico react-router 2

Question

Ho una semplice Hello World App con un percorso senza percorso secondario o percorso indice. Per il routing, utilizzo plain routes anziché jsx sysntax. Ancora una volta sto usando react-router dynamic routing per caricare il componente Hello con webpack. Il mio file app.jsx ha il seguente codice.

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") 
); 

componente Hello.jsx ha il seguente codice

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

    render() { 

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

Answer 1

Questo errore accade perché webpack non supporta i moduli ES6

se si utilizza babel a transpile codice ES6 utilizzare la parola chiave predefinita come

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

quindi i percorsi saranno

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