Question

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

未捕获错误：元素类型无效：需要一个字符串（for 内置组件）或类/函数（用于复合组件）但得到了：未定义。您可能忘记从中导出组件它定义的文件。

我经历了几次代码并且没有看到任何错误。组件和容器已正确定义和导出。

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 cfg

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],
}

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

Answer 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吗？

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

1 个答案:

编辑：