当我将反应路由器与 webpack 一起使用时，它显示错误“React.createElement：类型无效”答案

【问题标题】：When I use react router with webpack, it shows the error "React.createElement: type is invalid"当我将反应路由器与 webpack 一起使用时，它显示错误“React.createElement：类型无效”
【发布时间】：2020-03-25 17:43:41
【问题描述】：

index.html

<html>
    <head>
        <title>Webpack and React</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/cerulean/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <div id="app">hello</div>
        <script src="index.js"></script>
    </body>
</html>

index.js

import React from "react";
import ReactDom from "react-dom";
import {BrowserRouter as Router, Route} from "react-router";

import Layout from "./pages/Layout";
import Featured from "./pages/Featured";
import Archives from "./pages/Archives";
import Settings from "./pages/Settings";

const app = document.getElementById('app');

ReactDom.render(
    <Router>
            <Route path = "/" component={Layout}/>
    </Router>,
    app);

布局.js

import React from "react";


export default class Layout extends React.Component{
    render(){
        return(
            <div>
                <h1>Discussion Board</h1>
            </div>

        );
    }
}

我按照网上的例子学习了react router with 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, or you might have mixed up default and named imports.

我找不到导致错误的原因。有人说我可能不会添加导出默认但我已经添加了它。还是报错。

【问题讨论】：

你确定你的 html 中有一个带有 id 或 app 的元素吗？
@dev_junwen ys，它在 index.html 中有 id。另外，这个错误只有在我使用反应路由器时才会出现。
您的Featured、Archives 和Settings 组件怎么样？您是否将它们包含在您的路线中？

标签： javascript reactjs webpack react-router

【解决方案1】：

你的进口

import {BrowserRouter as Router, Route} from "react-router";

应该是

import {BrowserRouter as Router, Route} from "react-router-dom";

来自react-router npm 包页面的注释：

注意：这个包提供了 React Router 的核心路由功能，但你可能不想直接安装它。如果您正在编写将在浏览器中运行的应用程序，您应该安装react-router-dom。同样，如果您正在编写 React Native 应用程序，则应该安装 react-router-native。这两个都将安装react-router 作为依赖项。

【讨论】：

你解决了我的问题！！但是为什么会这样呢？示例是“来自“react-router””
我已更新我的答案，为您的查询添加参考
react-router 是一个基础实现。 react-router-dom 是 react-router 的包装器，可在浏览器中运行。