Question

尝试在我的本地计算机上运行任何（和所有）React-Router示例https://github.com/rackt/react-router/tree/master/examples，同时仅将ES6语法更改为ES5我会从同一行代码中获得相同的错误

代码

 Router.run(routes, function (Handler) {

错误

Cannot read property 'validateProps' of undefined

我没有改变任何关于示例的内容，除了使用ES6来声明依赖项并解构构建器

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是一个jsfiddle，其中包含从github粘贴here的代码的ES5版本

以下是我正在努力开展工作的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];

由于路由器是一个对象（在控制台中键入ReactRouter并且您将看到对象及其方法/属性），而不是数组，所以

不能正常工作，因此您可以＆＃39 ; t使用括号索引。

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

为什么路线未定义

1 个答案: