当我将 React 路由器与 webpack 一起使用时，它显示错误“React.createElement: type is invalid”

Question

index.html索引.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索引.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);

Layout.js布局.js

import React from "react";


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

        );
    }
}

I follow the online example to learn react router with webpack but it shows the error:我按照在线示例学习 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.

I cannot find what reason to cause the error.我找不到导致错误的原因。 Someone said that I might not add the export default but I have already added it.有人说我可能不添加 export default 但我已经添加了它。 It is still error.仍然是错误。

Answer 1

Your import你的进口

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

should be应该

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

A note from the react-router npm package page:来自react-router npm 包页面的注释：

Note: This package provides the core routing functionality for React Router, but you might not want to install it directly.注意：此包为 React Router 提供核心路由功能，但您可能不想直接安装它。 If you are writing an application that will run in the browser, you should instead install react-router-dom .如果您正在编写将在浏览器中运行的应用程序，则应该安装react-router-dom 。 Similarly, if you are writing a React Native application, you should instead install react-router-native .同样，如果您正在编写 React Native 应用程序，则应该安装react-router-native 。 Both of those will install react-router as a dependency.两者都将安装react-router作为依赖项。

当我将 React 路由器与 webpack 一起使用时，它显示错误“React.createElement: type is invalid”

问题描述

1 个解决方案

解决方案1
2 已采纳 2019-11-30 13:12:14

当我将 React 路由器与 webpack 一起使用时，它显示错误“React.createElement: type is invalid”

问题描述

1 个解决方案

解决方案1 2 已采纳 2019-11-30 13:12:14

解决方案1
2 已采纳 2019-11-30 13:12:14