![](/img/trans.png)
[英]React-Router Error "Cannot read property 'location' of undefined"
[英]React-router error - 'Cannot call method 'getRouteAtDepth' of undefined'
我正在嘗試在我的應用程序上實現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 starter kit ”,它也在服務器上呈現“App”組件。 將react-router添加到該組件時,會產生此(服務器端)錯誤。
我不需要在我的項目上進行服務器端渲染,因此刪除它解決了我的問題。 我會試着調查為什么這會在我有空的時候發生。
嘗試將您的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方式重構,我希望它能幫到你。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.