react router报错？

Question

首先从文件树开始，刚好一张图一览无遗：

dist是打包后的文件夹，可以忽视了，其他目录关系也很简单，我基本上排除路径错误的问题了。

再看看入口文件webpack.config.js:

var path = require('path');

module.exports = {
    entry: './index.js'
    ,
    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    module: {
        loaders: [
            { test: /\.jsx?$/, loaders: ['babel'] }
        ]
    }
}

entry: './index.js', 那么入口文件是index.js咯？

这是index.js源码：

import React from 'react';
import { render } from 'react-dom';
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

import App from './App';

import { Router, browserHistory } from 'react-router';
import routes from './routes';

render(
  <Router history={browserHistory}>{ routes }</Router>,
  document.getElementById('container');
)

<Router history={browserHistory}>{ routes }</Router>, 所以把路由规则写在routes.js文件里面，以下是routes.js源码：

import React from 'react';
import { Route, IndexRoute, Link } from 'react-router';
import App from './App';
import Home from './src/Home';
import Code from './src/Code';
import Think from './src/Think';

const routes = (
    <Route path="/" component={App}>
        <IndexRoute component={Home} />
        <Route path="/home" component={Home} />
        <Route path="/code" component={Code} />
        <Route path="/think" component={Think} />
    </Route>
);

export default routes;

然而报错了，命令行下的报错信息是：

浏览器下的报错信息是：

再附上App.jsx源码：

import React from 'react';
import ReactDOM from 'react-dom';
import Header from './src/Header';
import Home from './src/Home';
import Code from './src/Code';
import Think from './src/Think';

export default class App extends Component {
  render() {
    let styles = {
      appStyle: {
        display: 'flex',
        flex: '1'
      }
    }

    return (
      <div style={styles.appStyle}>
        <Header />
        {this.props.children}
      </div>
    )
  }
}

如果想看源码，在这里

小白理解粗浅，请指教，谢谢～

Answer 1

你写的是ES2015语法，但却没有加ES2015的babel preset，也没有加react的preset，报错很正常，把webpack.config.js改改：

var path = require('path');

module.exports = {
    entry: './index.js'
    ,
    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    module: {
        loaders: [
            { test: /\.jsx?$/, loaders: ['babel?presets[]=react&presets[]=es2015'] }
        ]
    }
}

然后再把这两个preset安装一下，

npm install --save-dev babel-preset-react babel-preset-es2015

在运行试试看

修正：

哈哈，render方法写错了，分号位置不对：

render(<Router history={browserHistory}>{ routes }</Router>, document.getElementById('container'));

Answer 2

评论里不能截图，只能在这里说了。
果然是分号的位置不对，感谢！！但修改了之后，终端报了另一个错：

请问是我写的函数有语法错误么？