ReactJS + Gulp + Reactify + Browserify元素类型无效：期望一个字符串但得到：undefined

Question

我收到此错误：

  

bundle.js：26912未捕获错误：元素类型无效：预期字符串（对于内置组件）或类/函数（对于复合组件）但得到：undefined。您可能忘记从其定义的文件中导出组件。

目录结构......

.
├── components
│   ├── index.js
│   ├── NavBar.js
│   └── SignIn.js
├── css
│   └── style.css
├── index.html
└── main.js

这是我的代码： main.js

var React = require('react');
var ReactDOM = require('react-dom');
var Router = require('react-router').Router;
var Route = require('react-router').Route;
var Navbar = require("./components/NavBar").default;
var SidePanel = require("./components/index").default;

var App = React.createClass({
	render : function() {
		return (
			<div className="Main">
				<Navbar/>
					<div className="container">
						<SidePanel />
							<div className="row">
							</div>
					</div>
			</div>
		)
	}
});
ReactDOM.render(
	<Router>
		<Route path="/" components={App}/>
	</Router>,
 document.getElementById('app'));

我的 gulpfile.js

"use strict";

var gulp = require('gulp');
var connect = require('gulp-connect'); //Runs a local dev server
var open = require('gulp-open'); //Open a URL in a web browser
var browserify = require('browserify'); // Bundles JS
var reactify = require('reactify');  // Transforms React JSX to JS
var source = require('vinyl-source-stream'); // Use conventional text streams with Gulp
var concat = require('gulp-concat'); //Concatenates files
// var lint = require('gulp-eslint'); //Lint JS files, including JSX
var babelify = require('babelify'); // support for es6

var config = {
	port: 9005,
	devBaseUrl: 'http://localhost',
	paths: {
		html: './src/*.html',
		js: './src/**/*.js',
		images: './src/images/*',
		css: [
      		'node_modules/bootstrap/dist/css/bootstrap.min.css',
      		'node_modules/bootstrap/dist/css/bootstrap-theme.min.css',
					'./src/css/*.css'
    	],
		dist: './dist',
		mainJs: './src/main.js'
	}
}

//Start a local development server
gulp.task('connect', function() {
	connect.server({
		root: ['dist'],
		port: config.port,
		base: config.devBaseUrl,
		livereload: true
	});
});

gulp.task('open', ['connect'], function() {
	gulp.src('dist/index.html')
		.pipe(open('', { url: config.devBaseUrl + ':' + config.port + '/'}));
});

gulp.task('html', function() {
	gulp.src(config.paths.html)
		.pipe(gulp.dest(config.paths.dist))
		.pipe(connect.reload());
});

gulp.task('js', function() {
	browserify(config.paths.mainJs)
		//.transform(babelify)
		.transform(reactify)
		.bundle()
		.on('error', console.error.bind(console))
		.pipe(source('bundle.js'))
		.pipe(gulp.dest(config.paths.dist + '/scripts'))
		.pipe(connect.reload());
});

gulp.task('css', function() {
	gulp.src(config.paths.css)
		.pipe(concat('bundle.css'))
		.pipe(gulp.dest(config.paths.dist + '/css'));
});

// Migrates images to dist folder
// Note that I could even optimize my images here
gulp.task('images', function () {
    gulp.src(config.paths.images)
        .pipe(gulp.dest(config.paths.dist + '/images'))
        .pipe(connect.reload());

    //publish favicon
    gulp.src('./src/favicon.ico')
        .pipe(gulp.dest(config.paths.dist));
});

// gulp.task('lint', function() {
// 	return gulp.src(config.paths.js)
// 		.pipe(lint({config: 'eslint.config.json'}))
// 		.pipe(lint.format());
// });

gulp.task('watch', function() {
	gulp.watch(config.paths.html, ['html']);
	gulp.watch(config.paths.js, ['js']);
});

gulp.task('default', ['html', 'js', 'css', 'images', 'open', 'watch']);

NavBar.js

var React = require('react');

var Navbar = React.createClass({
	render: function() {
		return (
			<div>
        <nav className="navbar navbar-default">
          <div className="container-fluid">
              <ul className="nav navbar-nav">
                <li><a href="/">Home</a></li>
                <li><a href="/#authors">Authors</a></li>
                <li><a href="/#about">About</a></li>
              </ul>
          </div>
        </nav>
			</div>
		);
	}
});

module.exports = Navbar;

index.js

var React = require("react");
var SignInForm = require("./SignIn");
var SidePanel = React.createClass({

  render: function() {
    return (
      <div className="side-panel">
        <div className="col-md-4">
          <SignInForm />
        </div>
      </div>
    )
  }
});
module.exports = SidePanel;

使用ES5语法

Answer 1

您在components中写了component而不是Route ..

Answer 2

用这个 -

替换你的main.js文件

var React = require('react');
var ReactDOM = require('react-dom');
import {Router, Route, browserHistory} from 'react-router';
var Navbar = require("./components/NavBar");
var SidePanel = require("./components/index");

var App = React.createClass({
    render : function() {
        return (
            <div className="Main">
                <Navbar/>
                    <div className="container">
                        <SidePanel />
                            <div className="row">
                            </div>
                    </div>
            </div>
        )
    }
});
ReactDOM.render((<Router history={browserHistory}><Route path="/" components={App}/></Router>),document.getElementById('app'));