Unexpected token < error in react router component

问题

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;

回答1:

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>

回答2:

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 :)

来源：https://stackoverflow.com/questions/29718481/unexpected-token-error-in-react-router-component

标签

javascript

reactjs

html5-history