react-router-redux: 模块构建失败: SyntaxError: Unexpected token ...reducers

Question

//app.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, combineReducers, applyMiddleware } from 'redux';
import createHistory from 'history/createBrowserHistory';
import { Route } from 'react-router';

import { ConnectedRouter, routerReducer, routerMiddleware, push } from 'react-router-redux';

import App from './components/app.js';
import reducers from './reducers';

const history = createHistory();
const middleware = routerMiddleware(history);

// Add the reducer to your store on the `router` key
// Also apply our middleware for navigating
const store = createStore({
    ...reducers,
    router: routerReducer
  },
  applyMiddleware(middleware)
);

const About = () => {
  return (<div>
    Will this work?
  </div>);
}

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <div>
        <Route exact path="/" component={App}/>
        <Route path="/about" component={About}/>
      </div>
    </ConnectedRouter>
  </Provider>
  , document.querySelector('#app'));

这是我的 reducers/index.js 代码。

//reducers/index.js
import { combineReducers } from 'redux';
import { mobileLinks } from './reducer_header';
import UserDetailsReducer from './reducer_user_details';

const rootReducer = combineReducers({
  mobileLinks,
  userDetails: UserDetailsReducer
});

export default rootReducer;

我该怎么做才能解决这个问题？我找不到新版本的 react-router-redux 的任何示例。我已经尝试将 routerReducer 移动到 reducers/index.js ，但这也不起作用。有人可以帮忙吗？

Answer 1

很可能你没有设置 Babel 来转换 Object Spread Operator，你可以阅读它 here。

您可以像这样简单地安装 Babel“Object rest spread transform”预设： npm install --save-dev babel-plugin-transform-object-rest-spread

并将其添加到您的插件列表中：

{
    "plugins": [
        // Other plugins...
        "transform-object-rest-spread"
    ]
}