Question

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);

Layout.js

import React from "react";


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

        );
    }
}

我遵循在线示例来学习Webpack的React Router，但显示错误：

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.

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

Answer 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与Webpack一起使用时，它显示错误“ React.createElement：类型无效”

1 个答案: