3

アプリに react-router を実装しようとしています。私のメインファイルには次のコードが含まれています：

'use strict';

import 'babel/polyfill';
import React from 'react/addons';
import App from './components/App';
import ContentPage from './components/ContentPage';
import Dispatcher from './core/Dispatcher';
import AppActions from './actions/AppActions';
import Router from 'react-router';

var { Route, RouteHandler, Link } = Router;

function run() {

  var routes = (
    <Route name="app" path="/" handler={App}>
      <Route handler={ContentPage}/>
    </Route>
  );

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

}

私のAppコンポーネント内には、次のコードがあります。

render() {
    return (
      <div className="App">
        <RouteHandler />
      </div>
    );
  }

このコードは、次のエラーを生成します。

TypeError: Cannot call method 'getRouteAtDepth' of undefined
   at RouteHandler.createChildRouteHandler

私<RouteHandler />が直接になるように変更すると<ContentPage />、コードは機能します。私は何が間違っているのですか？

編集:どうやら、サーバー上でも「アプリ」コンポーネントをレンダリングする「 Reactスターターキット」を使用していたようです。そのコンポーネントに react-router を追加すると、この (サーバー側の) エラーが発生しました。

私のプロジェクトではサーバー側のレンダリングは必要なかったので、これを削除することで問題が解決しました。時間があるときに、なぜこのようなことが起こったのかを後で調べてみます。

4

1 に答える 1

0

次のようなコンポーネントモジュールに移動routerしてみてください：App

var React = require('react'),
    Router = require('react-router'),
    Route = Router.Route,
    RouteHandler = Router.RouteHandler,
    ContentPage = require('./components/ContentPage'),
    App, routes;

App = React.createClass({
    render: function(){
         return (
              <div className="App">
                  <RouteHandler />
              </div>
         );
    }
});

routes = (
    <Route name="app" path="/" handler={App}>
        <Route handler={ContentPage}/>
    </Route>
);

module.exports = {
    run: function () {
        Router.run(routes, function (Handler) {
            React.render(<Handler/>, document.body)
        });
    }
};

適切なrunモジュールは次のようになります。

 var AppRunner = require('./component/App');
 AppRunner.run();

これを ES6 の方法でリファクタリングしてください。

于 2015-04-07T12:36:58.827 に答える