既存のアプリを取得し、最も単純な HashLocation メソッドで React Router を使用して開始しようとしています。
使用: React 0.12.2 React Router 0.12.4
main.js (エントリ ポイント):
// Create App Container
$('body').prepend('<div id="appContainer"></div>');
// Run the App
Router.run(Routes, function (Handler) {
React.render(React.createElement(Handler), document.getElementById('appContainer'));
});
ルート.jsx:
var React = require('react'),
Router = require('react-router'),
Route = Router.Route,
DefaultRoute = Router.DefaultRoute,
App = require('./app'),
Question1 = require('./views/question1'),
Question2 = require('./views/question2'),
Question3 = require('./views/question3'),
Question4 = require('./views/question4'),
Question5 = require('./views/question5'),
Question6 = require('./views/question6'),
Question7 = require('./views/question7'),
Result = require('./views/result');
var Routes = (
<Route name="app" path="/" handler={App}>
<Route name="questions/1" handler={Question1}/>
<Route name="questions/2" handler={Question2}/>
<Route name="questions/3" handler={Question3}/>
<Route name="questions/4" handler={Question4}/>
<Route name="questions/5" handler={Question5}/>
<Route name="questions/6" handler={Question6}/>
<Route name="questions/7" handler={Question6}/>
<Route name="results" handler={Result}/>
<DefaultRoute handler={Question1}/>
</Route>
);
module.exports = Routes;
app.jsx:
var Router = require('react-router');
var Link = Router.Link;
var RouteHandler = Router.RouteHandler;
var App = React.createClass({
render: function() {
return (
<section id='app' style={styles.app}>
<header>
<ul>
<li><Link to="questions/1">Question 1</Link></li>
<li><Link to="questions/2">Question 2</Link></li>
<li><Link to="questions/3">Question 3</Link></li>
<li><Link to="questions/4">Question 4</Link></li>
<li><Link to="questions/5">Question 5</Link></li>
<li><Link to="questions/6">Question 6</Link></li>
<li><Link to="questions/7">Question 7</Link></li>
<li><Link to="results">Results</Link></li>
</ul>
</header>
<Router.RouteHandler/>
</section>
);
}
});
module.exports = App;
question1.jsx (他の質問も同様です):
var React = require('react');
var Question1 = React.createClass({
render: function() {
return (
<div>
Question 1.
</div>
);
}
});
module.exports = Question1;
app.jsx でレンダリングされたリンクをクリックすると、Firefox のコンソールに次のエラーが表示されます。
ビルドされた main.js ファイルの次の行に移動します。
ただし、Chrome では、まったく別のエラーが発生します。
面白いことに、ページ全体を手動で更新すると、正しい質問が画面に表示されます。たとえば、新しいタブを開いてhttp://localhost:9090/#/questions/1に移動すると、「質問 1」が表示されます。画面上：
しかし、質問 2 をクリックすると、次のエラーが発生します。
しかし、questions/2 の URL でページを完全にリロードすると、次のように機能します。
