0

尝试在我的本地机器上运行任何（和所有）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];

这是粘贴在这里的 ES5 版本代码的 jsfiddle从 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'));
});
4

1 回答 1

1

请参阅对象解构

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在控制台中输入，您将看到该对象及其方法/属性），而不是数组，因此您不能使用括号索引。

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

于 2015-02-18T22:38:08.227 回答