Trying to take an existing app and use React Router with the simplest HashLocation method to get started.
Using: React 0.12.2 React Router 0.12.4
main.js (entry point):
// 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'));
});
routes.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 (other questions are like this too):
var React = require('react');
var Question1 = React.createClass({
render: function() {
return (
<div>
Question 1.
</div>
);
}
});
module.exports = Question1;
When I click any link rendered in app.jsx, Firefox's console displays this error:
Which takes me to this line in the built main.js file:
However, in Chrome, I get a completely different error:
Funny thing is that if I refresh the entire page manually, the correct question appears on screen, for example if I open a new tab and go to http://localhost:9090/#/questions/1 it will show "Question 1" on the screen:
But, when I click on Question 2, this is what triggers the error:
But, if I reload the page entirely while at the questions/2 url, it will work:
