我的路由React.js沒有運行

Question

我后面是教程中的dud，現在遇到了一些問題，路由不起作用，當我運行gulp時，終端出現了'gulp-eslint'錯誤：

/home/im/Project/react/psadmin/src/main.js
  7:13  error  Unexpected token =

/home/im/Project/react/psadmin/src/components/homePage.js
  6:13  error  Unexpected token =

/home/im/Project/react/psadmin/src/components/about/aboutPage.js
  6:13  error  Unexpected token =

這是我的文件：

"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') // Bundle JS
var reactify = require('reactify') // Transform React JSX to JS
var source = require('vinyl-source-stream') // Use convertional text streams with Gulp
var concat = require('gulp-concat') // Concatenates files
var lint = require('gulp-eslin') // Lint JS files, including JSX

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

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

    })
})

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

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

gulp.task('js', () => {
    browserify(config.paths.mainJs)
        .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', () => {
    gulp.src(config.paths.css)
        .pipe(concat('bundle.css'))
        .pipe(gulp.dest(config.paths.dist + '/css'))
})

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

gulp.task('watch', () => {
    gulp.watch(config.paths.html, ['html'])
    gulp.watch(config.paths.js, ['js', 'lint'])
    gulp.watch(config.paths.css, ['css'])
})

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

main.js

$ = jQuery = require('jquery')
var React = require('react')
var Home = require('./components/homePage')
var About = require('./components/about/aboutPage')

var App = React.createClass({
    render: () => {
        var Child

        switch(this.props.route) {
            case 'about': 
                Child = About
                break
            default: 
                Child = Home
        }

        return (
            <div>
                <Child />
            </div>
        )
    }
})

function render() {
    var route = window.location.hash.substr(1)
    React.render(<App route={route} />, document.getElementById('app'))
}
window.addEventListener('hashchange', render)
render()

homePage.js

"use strict"

var React = require('react')

var Home = React.createClass({
    render: () => {
        return (
            <div className="jumbotron">
                <h1>Pluralsight Administration</h1>
                <p>React, React Router, and Flux for ultra-responsive web apps.</p>
            </div>
        )
    }
})

module.exports = Home

aboutPage.js

"use strict"

var React = require('react')

var About = React.createClass({
    render: () => {
        return (
            <div>
                <h1>About</h1>
                <p>
                    This application uses the following technologies:
                    <ul>
                        <li>React</li>
                        <li>React Router</li>
                        <li>Flux</li>
                        <li>Node</li>
                        <li>Gulp</li>
                        <li>Browserify</li>
                        <li>Bootstrap</li>
                    </lu>
            </div>
        )
    }
})

module.exports = About

eslint.conf.json

{“ root”：true，“ ecmaFeatures”：{“ jsx”：true}，“ env”：{“ browser”：true，“ node”：true，“ jquery”：true}，“ rules”：{“ quotes “：0，” no-trailing-spaces“：0，” eol-last“：0，” no-unused-vars“：0，” no-underscore-dangle“：0，” no-alert“：0， “ no-lone-blocks”：0}，“ globals”：{“ jQuery”：true，“ $”：true}}

鏈接到我停下來的完整應用程序在git 這里

在此處鏈接到當前教程

Answer 1

您的語法錯誤。

替換render: () => {

render() { return (...) }

或者您的項目不支持ES6：

render: function(){return ...}並告訴我是否可以解決問題

Answer 2

您在實施上有些不滿意

使用React Create類，您需要執行以下操作

var About = React.createClass({
    render: function() {
        return (
            <div>
                <h1>About</h1>
                <p>
                    This application uses the following technologies:
                    <ul>
                        <li>React</li>
                        <li>React Router</li>
                        <li>Flux</li>
                        <li>Node</li>
                        <li>Gulp</li>
                        <li>Browserify</li>
                        <li>Bootstrap</li>
                    </lu>
            </div>
        )
    }
})

或者您可以使用ES6語法

   class About extends React.Component {
         render() {
            return (
                <div>
                    <h1>About</h1>
                    <p>
                        This application uses the following technologies:
                        <ul>
                            <li>React</li>
                            <li>React Router</li>
                            <li>Flux</li>
                            <li>Node</li>
                            <li>Gulp</li>
                            <li>Browserify</li>
                            <li>Bootstrap</li>
                        </lu>
                </div>
            )
        }
    }

或者您可以使用ES6箭頭語法

   const About = () => (
                <div>
                    <h1>About</h1>
                    <p>
                        This application uses the following technologies:
                        <ul>
                            <li>React</li>
                            <li>React Router</li>
                            <li>Flux</li>
                            <li>Node</li>
                            <li>Gulp</li>
                            <li>Browserify</li>
                            <li>Bootstrap</li>
                        </lu>
                </div>
            )