I'm trying to write router component for my react app. I'm create new react class and define some routes in componentDidMount method. This is full method
componentDidMount: function () {
var me = this;
router.get('/', function(req){
me.setState({
component: <MainPage />
});
});
router.get('/realty', function(req){
me.setState({
component: <RealtyPage />
});
});
router.get('/realty/:id', function(req){
me.setState({
component: <RealtyPage id={req.params.id} />
});
});
},
When I'm go to '/' or '/realty' all works. But, when I'm go to the 'realty/new' I've got error Uncaught SyntaxError: Unexpected token < in app.js:1. But Chrome debugger display that error in my index.html and I even can't debug this in browser. This error happens every time, when I go to the route with '/'. I.m trying to use other client-side routers, like page.js, rlite, grapnel, but all still the same. Maybe someone have any idea about this error?
UPD: This is fuul code of router component. Now it use page.js fo routing and I see the same error
var React = require('react');
var page = require('page');
var MainPage = require('../components/MainPage');
var RealtyPage = require('../components/RealtyPage');
var Router = React.createClass({
getInitialState: function(){
return {
component: <RealtyPage />
}
},
componentDidMount: function () {
var me = this;
page('/', function (ctx) {
me.setState({
component: <MainPage />
});
});
page('/realty', function (ctx) {
me.setState({
component: <RealtyPage />
});
});
page.start();
},
render: function(){
return this.state.component
}
});
module.exports = Router;
The "unexpected token" error can show up for a number of different reasons. I ran into a similar problem, and in my case the problem was that the script tag to load the generated bundle in the html was like so:
<script src="scripts/app.js"></script>
When navigating to a route with a parameter (same thing will happen to a nested route or a route with more than one segment), browser would try to load the script using the wrong url. In my case the route path was 'user/:id', and the browser made a request to 'http://127.0.0.1:3000/user/scripts/app.js' instead of 'http://127.0.0.1:3000/scripts/app.js'. The solution was easy, change the script tag to this:
<script src="/scripts/app.js"></script>
If anyone else is having this problem, please check your devtools network tab for server responses. The reason behind the error message is that you are trying to load a javascript/json file and an html file was returned (possibly an error message).
HTML files start like this normally:
<!doctype html>
<html>
...
The browser sees the first < and gets confused because this is not valid JavaScript so prints out the error message:
SyntaxError: Unexpected token <
So in the above case, when the OP requested a wrong filename, he got an error page back (in HTML) which lead to that error.
Hope that helps someone else :)
Had the same error as well when using React-Router properties after adding the "/:uid" to edit relative path in my code:
<Route path="/edit/:uid" component={EditPage}/>
The problem was caused in my index.html where I load my main reference to my compiled javascript file bundle.js.
I switched:
<script src="./bundle.js"></script>
to
<script src="/bundle.js"></script>
And it immediately solved the problem.