Question

我有简单的Hello World App，其中一条路线没有子路线或索引路线。使用plain routes而不是jsx sysntax来路由我。我再次使用react-router＆＃39; s 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组件具有以下代码

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

    render() {

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

Answer 1

发生此错误是因为webpack不支持es6模块

如果您使用babel转换es6代码，请使用默认关键字

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

所以路线将是

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

不变违规：根路由必须在react-router 2动态路由中呈现单个元素错误

1 个答案: