javascript - 与 webpack 捆绑时 ReactRouter 未定义

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 运行没有错误，但是当我在浏览器中打开页面时，控制台中出现错误 + 警告。

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

我发现这是因为Link和ReactRouter是未定义，但我不明白这是怎么可能的，因为它们是导入的并且该软件包已安装。

您知道如何解决这个问题吗？

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 路由器 dom”。