Reagieren verschachtelte Route nicht Montag

Question

ich meine Routen aussehen soll:

/ 
/signin 
/discussion/:title 

jedoch etwas hinter dem zweiten Schrägstrich einen Fehler verursacht, und all meiner clientseitige Abhängigkeiten werfen unerwarteten Token Fehler . Zum Beispiel werden reactjs, mein CSS oder meine Bilddateien in meine index.html Datei geladen. Ich verwende ExpressJS im Backend. Ich verwende die folgende Zeile auf meinem Server das Routing an den Client zu schieben:

app.get('*', function(req, res, next) { 
    res.sendFile(path.join(__dirname, 'app/index.html')); 
}); 

routes.jsx

var React = require('react'), 
    Router = require('react-router'), 
    Route = Router.Route, 
    IndexRoute = Router.IndexRoute, 
    App = require('./components/app/app.jsx'), 
    Home = require('./components/pages/home.jsx'), 
    Discussion = require('./components/pages/discussion.jsx'), 
    DiscussionArea = require('./components/pages/discussionArea.jsx'), 
    Signin = require('./components/pages/signin.jsx'), 
    NotFound = require('./components/pages/notFound.jsx'); 

var routes = (
    <Route path='/' component={App}> 
    <IndexRoute component={Home} /> 
    <Route path='discussion' component={Discussion}> 
     <Route path='/discussion/area' component={DiscussionArea} /> 
    </Route> 
    <Route path='signin' component={Signin} /> 
    <Route path='*' component={NotFound} /> 
    </Route> 
); 

module.exports = routes; 

main.jsx

var React = require('react'), 
    ReactDOM = require('react-dom'), 
    ReactRouter = require('react-router'), 
    Router = ReactRouter.Router, 
    routes = require('./routes.jsx'), 
    createHistory = require('history').createHistory; 

ReactDOM.render((
    <Router history={ createHistory() }> 
    {routes} 
    </Router> 
), document.getElementById('app')); 

Warum sind meine Verschachtelte Routen, die nicht mit react-router aufgebaut werden?

Answer 1

Ich fand die Antwort. Beziehen Sie sich auf diese Stackoverflow-Antwort: Minimum nodejs server setup needed for React using react-router and browserHistory

Es hat etwas damit zu tun, wie mein Server die Pfade bedient. Meine Ressourcen werden relativ zur URL geladen, wenn sie vom Stammverzeichnis des Servers geladen werden sollen.

Die Lösung war <base href="/"> zum Kopf meiner index.html Datei hinzuzufügen.