为什么路线未定义

Question

尝试运行在我的本地机器上 https://github.com/rackt/react-router/tree/master/examples 任何（和所有）React-Router 示例，同时仅将 ES6 语法更改为 ES5 我不断收到来自同一行的相同错误代码

代码

 Router.run(routes, function (Handler) {

错误

Cannot read property 'validateProps' of undefined

除了不使用 ES6 来声明依赖关系和解构 Router 之外，我没有对示例进行任何更改

var React = require('react');
var Router = require('react-router');
var { Route, RouteHandler, Link } = Router;

我在我的索引中包含了指向 js 文件的链接，并为路由器做了这个

var Route = Router[0];
var RouteHandler = Router[1];
var Link = Router[2];

This is a jsfiddle with ES5 version of the code that's pasted here 来自 github

这是完整的代码，其中包含 ES5/6 的更改，我正试图开始工作

var Route = Router[0];
    var RouteHandler = Router[1];
    var Link = Router[2];

var App = React.createClass({
  render: function () {
    return (
      <div>
        <ol>
          <li><Link to="home">Home</Link></li>
          <li><Link to="signin">Sign in</Link></li>
          <li><Link to="forgot-password">Forgot Password</Link></li>
        </ol>
        <RouteHandler/>
      </div>
    );
  }
});

var SignedIn = React.createClass({
  render: function () {
    return (
      <div>
        <h2>Signed In</h2>
        <RouteHandler/>
      </div>
    );
  }
});

var Home = React.createClass({
  render: function () {
    return (
      <h3>Welcome home!</h3>
    );
  }
});

var SignedOut = React.createClass({
  render: function () {
    return (
      <div>
        <h2>Signed Out</h2>
        <RouteHandler/>
      </div>
    );
  }
});

var SignIn = React.createClass({
  render: function () {
    return (
      <h3>Please sign in.</h3>
    );
  }
});

var ForgotPassword = React.createClass({
  render: function () {
    return (
      <h3>Forgot your password?</h3>
    );
  }
});

var routes = (
  <Route handler={App}>
    <Route handler={SignedOut}>
      <Route name="signin" handler={SignIn}/>
      <Route name="forgot-password" handler={ForgotPassword}/>
    </Route>
    <Route handler={SignedIn}>
      <Route name="home" handler={Home}/>
    </Route>
  </Route>
);

Router.run(routes, function (Handler) {
  React.render(<Handler/>, document.getElementById('example'));
});

Answer 1

见Object Destructuring

var { Route, RouteHandler, Link } = Router; 本质上是指：

var Route = Router.Route;
var RouteHandler = Router.RouteHandler;
var Link = Router.Link;

你的方法：

var Router = ReactRouter;
var Route = Router[0];
var RouteHandler = Router[1];
var Link = Router[2];

不太有效，因为 Router 是一个对象（在控制台中键入 ReactRouter，您将看到该对象及其 methods/properties），而不是一个数组，所以您不能使用括号索引。

您的代码的工作示例：http://jsbin.com/wotefobuji/1/edit?html,js,output

为什么路线未定义

why are the routes undefined

reactjs

react-router