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

Vie npm：

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

并在你的babel选项中添加插件：

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

@withRouter意外令牌错误

1 个答案: