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

IT技术 reactjs webpack react-router react-router-component
2021-05-08 13:43:13

我有一个简单的 Hello World 应用程序,其中一条路由没有子路由或索引路由。对于路由,我使用普通路由而不是 jsx sysntax。我再次使用 react-router 的动态路由来加载带有 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>
        )
    }
}
1个回答

出现这个错误是因为 webpack 不支持 es6 module

如果您使用 babel 来转译 es6 代码,请使用默认关键字,如

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

所以路线将是

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