react-router-redux:模块构建失败:SyntaxError:意外的令牌...... reducers

时间:2017-03-25 13:22:05

标签: react-router react-redux react-router-redux

I'm facing this error while trying to integrate react-router-redux into my React project. Following is my app.js code and reducers/index.js

//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,但这也没有用。有人可以帮忙吗?

1 个答案:

答案 0 :(得分:3)

很可能你没有设置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"
    ]
}