@withRouter 意外令牌错误

Question

似乎每次我必须在新项目中设置 React Router 时，我运行可能会通过版本更改进入新的东西。

我正在使用 reactjs 和 mobx 状态树（尽管此时还没有使用任何东西）。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import HomeComponent from './HomeComponent.js';
import {withRouter, Route} from 'react-router'

@withRouter
export default class App extends Component {
  render() {
    return (
       <Route exact path='/' component={HomeComponent}/>
    );
  }
}

export default App;

当我运行我得到

ERROR in ./src/components/App.js
Module build failed: SyntaxError /components/App.js: Unexpected token (6:0)

我也收到一些警告

 Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.

编辑

根据 "Artem Mirchenko"

的评论

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider  } from 'mobx-react';
import { useStrict } from 'mobx';
import createBrowserHistory from 'history/createBrowserHistory';
import {syncHistoryWithStore } from 'mobx-react-router';
import { Router } from 'react-router'

import AppContainer from './components/App';

const browserHistory = createBrowserHistory();

import stores from '../src/stores/Stores';

const history = syncHistoryWithStore(browserHistory, stores.routingStore);

ReactDOM.render(
    <Provider {... stores}>
        <Router history={history}>
           <AppContainer />
        </Router>
    </Provider>,      
       document.getElementById('app')
);

import {RouterStore} from 'mobx-react-router';

const routingStore = new RouterStore();
const stores = {
    routingStore
}

export default stores;

Answer 1

您需要安装babel插件transform-decorators-legacy。

通过纱线：

yard add --dev transform-decorators-legacy

查看 npm：

npm install --save-dev transform-decorators-legacy

并在你的 babel 选项中添加到插件 ket:

{
 // pressets ....
 "plugins": ["transform-decorators-legacy"]
}

@withRouter 意外令牌错误

@withRouter Unexpected Token Error

reactjs

react-router

mobx