react-router
の最新バージョン(バージョン^ 3.0.0)を使用しています。
ES5を使用して次のルーティングを作成しました。
routes.js
:
var React = require("react");
var Router = require("react-router");
var AuthorPage = require('./components/authors/authorPage')
var App = require('./components/app')
var Route = Router.Route;
var routes = (
<Route path="/" component={App}>
<Route path="authors" component={AuthorPage}/>
</Route>
);
module.exports = routes;
main.js
という別のJSファイルで、次の呼び出しを実行します。
main.js
:
var React= require("react");
var ReactDom = require("react-dom");
var Router = require('react-router').Router;
var routes = require('./routes');
ReactDom.render(<Router routes={routes}></Router>, document.getElementById('app'));
コードを実行すると、Google Chrome開発者ツールで次の例外が発生します。
不明なTypeError:未定義のプロパティ 'getCurrentLocation'を読み取れません
何故ですか?私は何が欠けていますか?
<Router>
に履歴を渡していません。
詳細については、 history documentation をご覧ください。
同じエラーがあった場合、次のように解決しました。
追加する
var hashHistory = ReactRouter.hashHistory;
そして、ルーターで、hashHistoryに等しい履歴を設定します
<Router history={hashHistory}>
あなたの場合:
var routes = (
<Router history={hashHistory}>
<Route path="/" component={App}>
<Route path="authors" component={AuthorPage}/>
</Route>
</Router>
);