与 webpack 捆绑时，React Router 未定义

Question

我有一个奇怪的问题，似乎与 webpack 有关，但我不确定。这是上下文，我正在使用 ReactJS 创建一个前端，并且我有一个 Java 后端，所以我要做的是编译和捆绑所有 JS使用 webpack 和下面的配置。

const path = require("path");

module.exports = {
    entry: {
        main: path.join(__dirname, "src/js/index.js")
    },
    output: {
        path: path.join(__dirname, "src/main/resources/static/js"),
        filename: "bundle.js"
    },
    resolve: {
        extensions: [".js", ".jsx"],
        modules: [
            path.join(__dirname, "src"),
            "node_modules"
        ]
    },
    module: {
        rules: [
            {
                test: /\.less$/,
                loader: "less-loader"
            },
            {
                test: /\.(js|jsx)$/,
                loader: "babel-loader"
            },
        ]
    }
};

这是唯一的 JS 文件，显示非常基本的失败：

import PropTypes from "prop-types";
import React from "react";
import ReactDOM from "react-dom";
import ReactRouter, {Link} from "react-router";

document.addEventListener("DOMContentLoaded", function () {
    console.log(React);
    console.log(PropTypes);
    console.log(ReactRouter);
    console.log(Link);
    console.log(document.getElementById("root"));

    ReactDOM.render(<Link to="/">Home</Link>, document.getElementById("root"));
});

我已经安装了所有npm所需的包，webpack运行没有错误，但是当我在浏览器中打开页面时，控制台出现错误+警告。

警告：React.createElement：类型无效——需要一个字符串 （对于内置组件）或类/函数（对于复合 组件）但得到：未定义。您可能忘记导出您的 来自定义它的文件中的组件。

错误：元素类型是 无效：需要一个字符串（对于内置组件）或一个 类/函数（用于复合组件）但得到：未定义。你 可能忘记从定义它的文件中导出您的组件。

我发现这是因为Link和ReactRouter是undefined，但是我不明白怎么可能，因为它们被导入并安装了包。

你对如何解决这个问题有任何想法吗？

Answer 1

除了您帖子的第一条评论之外，您可能还想查看您拥有的 React-Router 版本。在最新版本中，{ Link } 是 "react-router-dom" 包的一部分，您可以将 "react-router" 的 { Router } 替换为 "react-router-dom" 的 { BrowserRouter }。

React-Router-Dom 是您安装的 React-Router 软件包的一部分（如果它是较新的版本），因此您只需将 React-Router 替换为 { BrowserRouter } 并将“react-router/”替换为“ react-router-dom”。