ReactJs kann verschachtelte Route nicht zugreifen

Question

Ich habe ein Problem mit verschachtelten Routen mit React-Router.

Hier ist mein Code (zwei einfache reagieren Komponenten, Routen-Datei COMP1/comp2 zuzugreifen):

House.js

export default connect(st => st)(class House extends React.Component { 
render() { 
    return (
    <div>  
    {this.props.children} 
    </div> 
); 
} 
}) 

Window.js

export default connect(st => st)(class Window extends React.Component { 
    render() { 
    return (
     <div > 
     hey hey 
     </div> 
    ); 
    } 
}) 

routes.js

export const routes = (
    <Router history={ history }> 
    <Route path="/house" component={House}> 
     <Route path="/house/window" component={Window} /> 
    </Route> 
</Router> 
); 

Wenn ich programmgesteuert nach "/ house/window" umadressiere, kann ich auf die Route zugreifen und die Seite zeigt "hey hey". Wenn ich will direkt die URL zuzugreifen: localhost: 8080/Haus/Fenster

Es zeigt eine leere Seite und eine Konsole Fehler:

Anforderungs-URL: http://localhost:8080/house/window anfordern Methode: Statuscode GET: 304 nicht geändert

Und dann: GET http: // localhost: 8080 /house/js/bundle.js (404)

auch http: // localhost: 8080/Haus/(mit Schrägstrich) zeigt den gleichen Fehler.

Ich verstehe wirklich nicht, diese seltsame Umleitung http: // localhost: 8080 /house/js/bundle.js

Ich bin wahrscheinlich etwas falsch zu machen, aber Stackoverflow nach kriecht, kann ich immer noch nicht sieh es dir an.

Answer 1

Nested Routen können nicht übergeordneten Pfad in path Attribut enthalten sind:

export const routes = (
    <Router history={ history }> 
    <Route path="/house/" component={House}> 
     <Route path="window" component={Window} /> 
    </Route> 
</Router> 
); 

Answer 2

ich das Problem gefunden: meine bundle.js Skript in index.html enthalten war mit einem relativen Pfad 'js/bundle.js' enthalten Also habe ich es für "/js/bundle.js" geändert.

Leider machte es kein Problem, bis ich einige Routen nisten wollte.