react项目一引入react-router（即使只是import不使用）打包后的代码就在浏览器中出错

Question

最近在学习react,发现了一个很奇怪的现象，只要引入react-router，即使只是import根本不使用,打包后的代码在浏览器中就会报错，打包是成功的。

入口文件 index.jsx

import React, {Component, PropTypes} from 'react'
import {render} from 'react-dom'

import './static/css/normalize.css'

import RouteMap from './router/RouteMap'


render(
  <RouteMap />,
  document.getElementById('root')
);

RouteMap 组件：

import React from 'react'
import { Router, Route, IndexRoute, browserHistory} from 'react-router'

class RouteMap extends React.Component {
  render(){
    return (
      <div>111</div>
    )
  }
}
export default RouteMap

依赖：

    "autoprefixer": "^7.1.5",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-react-transform": "^3.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.7",
    "html-webpack-plugin": "^2.30.1",
    "open-browser-webpack-plugin": "0.0.5",
    "postcss-loader": "^2.0.8",
    "react-transform-hmr": "^1.0.4",
    "style-loader": "^0.19.0",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.2"
  },
  "dependencies": {
    "immutable": "^3.8.2",
    "react": "^16.0.0",
    "react-addons-css-transition-group": "^15.6.2",
    "react-addons-pure-render-mixin": "^15.6.2",
    "react-dom": "^16.0.0",
    "react-redux": "^5.0.6",
    "react-router": "^2.8.1",
    "react-router-dom": "^4.2.2",
    "redux": "^3.7.2"
  }

webpack配置：

'use strict'
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const OpenBrowserPlugin = require('open-browser-webpack-plugin');

const config = {
  devtool: 'eval-source-map',
  entry: path.resolve(__dirname, 'app/index.jsx'),
  resolve:{
      extensions:['.js','.jsx']
  },
  output: {
      path: __dirname + "/build",
      filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /(\.js|\.jsx)$/, 
        use: {loader: 'babel-loader'}, 
        exclude: /node_modules/
      },
      {
        test: /\.css$/, 
        use: [
          {loader: 'style-loader'},
          {loader: 'css-loader'},
          {loader: 'postcss-loader'},
        ], 
        exclude: /node_modules/
      }
    ]
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: __dirname+'/app/index.tpl.html',
      //inject: 'body',
      //filename: './index.html'
    }) ,
    new webpack.HotModuleReplacementPlugin(),
    new OpenBrowserPlugin({url: 'http://localhost:8000'}),
    new webpack.DefinePlugin({
      __DEV__: JSON.stringify(JSON.parse((process.env.NODE_ENV == 'dev') || 'false'))
    })
  ],

  devServer: {
    contentBase: "./public", //本地服务器所加载的页面所在的目录
    historyApiFallback: true, //不跳转
    inline: true, //实时刷新
    hot: true  // 使用热加载插件 HotModuleReplacementPlugin
  }
};
module.exports = config;

发现只要将import { Router, Route, IndexRoute, browserHistory} from 'react-router'`删掉代码就能正常运行：

求各位前辈帮帮看看到底什么问题

Answer 1

react-router-dom在react-router之上做了一层封装，提供了HashRouter、BrowserRouter等路由;react-router只提供路由的基本功能。你直接用react-router-dom那个包就行了

Answer 2

建议你import reactRouter from 'react-router'然后打印看下reactRouter里面有没有{ Router, Route, IndexRoute, browserHistory}这些属性，还有react-router-dom这个包你都用了，你react-router就不要用2了，react-router-dom这个如果要用，还是把react-router升到4吧