2015-04-18 17 views
26

Próbuję napisać składnik routera dla mojej aplikacji reagowania. Tworzę nową klasę reakcji i definiuję niektóre trasy w metodzie componentDidMount. Jest to metoda pełnaNieoczekiwany token <błąd w reagowaniu komponentu routera

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} /> 
     }); 
    }); 

}, 

Kiedy jestem iść do '/' lub '/ Realty' wszystkie prace. Ale kiedy idę do "realty/new" mam błąd Uncaught SyntaxError: nieoczekiwany token < w app.js: 1. Ale debugger Chrome wyświetla ten błąd w moim pliku index.html i nawet nie mogę tego debugować w przeglądarce. Ten błąd występuje za każdym razem, gdy przechodzę do trasy z "/". Próbuję użyć innych routerów po stronie klienta, takich jak page.js, rlite, grapnel, ale wszystkie wciąż są takie same. Może ktoś ma jakiś pomysł na temat tego błędu?

UPD: To jest kod fuul komponentu routera. Teraz używać page.js fo routingu i widzę ten sam błąd

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; 
+0

Nie jestem pewien, dlaczego jesteś sprzęgania Node kodu po stronie serwera ze strony klienta kod React ... –

+0

używam biblioteki hak na stronie klienta routing. Obiekt router stworzony przez var router = new Grapnel(). Próbuję używać innych bibliotek, ale wynik jest taki sam. –

+0

Oh ok, moje złe, myślałem, że to ekspresowy router w tym kodzie. Czy możesz spróbować połączyć swój pełny kod źródłowy? Wydaje się, że błąd występuje w linii 1. Być może brakuje Ci JSXTransformer w skryptach HTML. –

Odpowiedz

106

W „nieoczekiwany znak” błąd może pojawić się na wielu różnych powodów. Wpadłem na podobny problem, aw moim przypadku problemem było to, że tag skryptu załadować wygenerowany pakiet w html było tak:

<script src="scripts/app.js"></script> 

Podczas nawigacji do trasy z parametrem (to samo będzie się działo do trasy zagnieżdżonej lub trasy z więcej niż jednym segmentem), przeglądarka spróbuje załadować skrypt za pomocą niewłaściwego adresu URL. W moim przypadku ścieżka trasy to "user /: id", a przeglądarka wysłała żądanie do "http://127.0.0.1:3000/użytkownika /scripts/app.js" zamiast "http://127.0.0.1:3000/scripts/app.js". Rozwiązanie było proste, zmienić tag skryptu do tego:

<script src="/scripts/app.js"></script> 
+9

Bardzo dziękuję, że błąd był naprawdę frustrujący. – manas

+2

To rozwiązanie nie jest oczywiste! Dzięki. – otajor

+1

Nigdy by tego nie znalazłem, gdyby nie ty. Dzięki Fastas. – Erika

Powiązane problemy