未捕获的错误：元素类型无效答案

【问题标题】：Uncaught Error: Element type is invalid未捕获的错误：元素类型无效
【发布时间】：2017-09-06 23:54:09
【问题描述】：

几个月前我使用了 React，现在当我尝试使用该代码时，对 webpack 配置进行了一些更改，我遇到了错误。我将 react-router 更改为 react-router-dom。整个路线文件在这里 https://github.com/mstanielewicz/react-simple-boilerplate/blob/master/app/config/routes.js 我得到：

未捕获的错误：元素类型无效：应为字符串（对于内置组件）或类/函数（用于复合组件）但得到：未定义。您可能忘记从定义它的文件。

我检查了几次代码，没有发现任何错误。组件和容器已正确定义和导出。

import React from 'react'
import {
  BrowserRouter as Router,
  Route,
  hashHistory,
  IndexRoute,
} from 'react-router-dom'
import { MainContainer, HomeContainer } from 'containers'

export default function getRoutes() {
  return (
    <Router history={hashHistory}>
        <Router path='/' component={MainContainer} >
          <IndexRoute component={HomeContainer} />
      </Router>
    </Router>
  )
}

目录结构是这样的

- app
  |_components
  |  |_Home
  |  |_index.js
  |_containers
     |_Main
     |_Home
     |_index.js

这样的出口

export MainContainer from './Main/MainContainer'
export HomeContainer from './Home/HomeContainer'

和 webpack 配置文件

var path = require('path')
var HtmlWebpackPlugin = require('html-webpack-plugin')

var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: path.join(__dirname, 'app/index.html'),
  filename: 'index.html',
  inject: 'body',
})

module.exports = {
  devtool: 'cheap-module-inline-source-map',
  entry: [
    './app/index.js',
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'index_bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
        ],
      },
    ],
  },
  resolve: {
    modules: [
      path.join(__dirname, 'app'),
      'node_modules',
    ],
  },
  plugins: [HtmlWebpackPluginConfig],
}

任何人都可以在这里看到问题吗？

【问题讨论】：

请在问题本身中包含相关代码。

标签： reactjs react-router

【解决方案1】：

对我来说似乎是import 的问题。

在 react-router-dom 中，Router 被 BrowserRouter 替换。或者可能是坏的default export，比如

import BrowserRouter from 'react-router-dom

而不是

import { BrowserRouter } from 'react-router-dom'

编辑：

您的导出似乎有点奇怪。尝试把import { MainContainer, HomeContainer } from 'containers'改成

import MainContainer from './containers/Main/MainContainer'
import HomeContainer from 'containers/Main/HomeContainer'

和export default class FooContainer 在各自的文件中。

还有一个事实是，您在 Router 中使用了 Router。不应该是 Route 吗？

【讨论】：