Invariante Verletzung: Die root route muss einen einzelnen Element Fehler in react-Router 2 dynamisches Routing rendern

Question

Ich habe einfache Hello World App mit einer Route keine untergeordnete Route oder Index-Route. Für das Routing verwende ich plain routes anstelle von jsx sysntax. Wieder verwende ich die dynamic routing react-router, um Hello-Komponente mit Webpack zu laden. Meine app.jsx-Datei hat den folgenden Code.

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 Komponente hat den folgenden Code

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

    render() { 

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

Answer 1

Dieser Fehler tritt auf, weil webpack nicht es6 Module unterstützt

wenn Sie babel verwenden es6 Code transpile dann verwenden das Standardschlüsselwort wie

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

so werden die Routen

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