Unexpected token < error in react router compon

2019-01-10 18:39发布

问题:

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>