使用 react-router 时参数列表后缺少 )答案

【问题标题】：missing ) after argument list when using react-router使用 react-router 时参数列表后缺少 )
【发布时间】：2015-06-29 14:34:54
【问题描述】：

我正在使用 React-router v0.13.3 和 React 0.13.3 构建一个简单的 Web 应用程序。但是当我尝试与 React-Router 集成时发生了一个大问题。

所以，这里是错误信息： Uncaught SyntaxError: missing ) after argument list

app.jsx

  var Router = window.ReactRouter;
  var Route = Router.Route;

  app.VIEW_SEARCH = 'search_view';
  app.VIEW_FAVORITE = 'favorite_view';
  app.VIEW_RESULT = 'result_view';

  var RouteHandler = Router.RouteHandler;
  var App = React.createClass({
    render () {
      return (
        <div>
          <h1>App</h1>
          <RouteHandler/>
        </div>
      )
    }
  });

  // declare our routes and their hierarchy
  var routes = (
    <Route handler={App} path="/">
      <Route path="search" handler={app.SearchView}/>
      <Route path="about" handler={app.AboutView}/>
      <Router.DefaultRoute handler={app.SearchView}/>
    </Route>
  );

  Router.run(routes, Router.HistoryLocation, (Root) => {
    React.render(<Root/>, document.body);
  });

上面粘贴的主要JavaScript代码，当我添加最后3行时出现错误。 Web 应用程序正在使用 bower 来管理依赖项。

如果我使用

  Router.run(routes, Router.HistoryLocation, function(handler) {
    React.render(<handler/>, document.body);
  });

替换最后 3 行。屏幕上没有任何显示。有人知道怎么解决吗？

【问题讨论】：

你是用babelify翻译箭头函数吗？否则浏览器中的支持是命中注定的。
@JeffFairley babel 解决方案是什么？没听说过。我在使用 grunt-react 时遇到了同样的问题。
@crockpotveggies 我正在使用 gulp，所以我不会费心粘贴我的配置，但你想在运行 browserify 时使用 babelify transformer。你可以看看grunt-babel插件。

标签： reactjs react-router

【解决方案1】：

括号错误可能是因为你使用了arrow function。这是 ecmascript 6 的一项功能，不幸的是，目前大多数浏览器都不支持。

由于您使用 gulp，因此您可以很容易地将 babel 添加到您的构建步骤中。否则，只需使用“旧”符号：function(Root) {return ...}

至于您在 cmets 中指出的第二个问题，我们需要 Root 的源代码来尝试了解发生了什么。

【讨论】：