IndexRoute zeigt nicht, wenn auf GH Seiten schieben

Question

Ich bin ein kleines Problem mit mit meinem Reagieren Router-Setup, aber nach auf Stack-Überlauf und GH um für eine Weile Sichten, habe ich nicht in der Lage gewesen, meinen Code zu arbeiten, um zu zwicken.

Mein Problem ist, dass, wenn auf GH Seiten Hochladen der Index Route meine Standard NoMatch Komponente macht, statt meiner Hauptkomponente. Wenn Sie dieselbe Anwendung auf einem lokalen Server ausführen, gibt localhost: 3000 Home Home korrekt aus.

Meine Strecken sind wie so ein:

ReactDOM.render((
 
    <Router history={browserHistory}> 
 
    <Route path="/" component={App}> 
 
     <IndexRoute component={Home} /> 
 
     <Route path="home" component={Home} /> 
 
     <Route path="projects" component={Projects} /> 
 
     <Route path="photography" component={Photography} /> 
 
     <Route path="about" component={About} /> 
 
     <Route path="contact" component={Contact} /> 
 
     <Route path="creativeprocess" component={CreativeProcess} /> 
 
     <Route path="readinglist" component={ReadingList} /> 
 
     <Route path="*" component={NoMatch} /> 
 
    </Route> 
 
    </Router>), 
 
    document.getElementById('root')

Und mein App.js einen Kopfabschnitt hat und folgt ihm dann mit einem div bis zum {this.props.children} . Auf GH Pages und local funktionieren alle Routen wie vorgesehen, mit Ausnahme der IndexRoute beim anfänglichen Rendern.

Wie kann ich die Home-Komponente als Standardkomponente festlegen, wenn ich zu GH Pages dränge?

Vielen Dank für die Hilfe!

Answer 1

GitHub Pages statischen Inhalt dient, aber Sie die browserHistory verwenden, die auf dem Server eine Art Router erfordert Seiten zu dienen. Für statischen Inhalt sollten Sie hashHistory verwenden.

ReactDOM.render((
    <Router history={hashHistory}> 
    <Route path="/" component={App}> 
     <IndexRoute component={Home} /> 
     <Route path="home" component={Home} /> 
     <Route path="projects" component={Projects} /> 
     <Route path="photography" component={Photography} /> 
     <Route path="about" component={About} /> 
     <Route path="contact" component={Contact} /> 
     <Route path="creativeprocess" component={CreativeProcess} /> 
     <Route path="readinglist" component={ReadingList} /> 
     <Route path="*" component={NoMatch} /> 
    </Route> 
    </Router> 
), document.getElementById('root')) 

Ich schrieb eine lange aufstanden Erklärung, warum Sie wollen hashHistory in this answer verwenden, aber das Wesentliche daran ist, dass, wenn ein Benutzer navigiert zu einer Seite, die Ihre Anwendung auf gehostet wird, sollten sie immer bedient werden Ihre Bewerbung. Die Anwendung verwendet die aktuelle URL, um zu bestimmen, was gerendert werden soll.

Für eine statische Site gibt es kein Back-End, um die richtigen Dateien unabhängig vom Pfad zu liefern. Um sicherzustellen, dass alle Routen den richtigen Inhalt haben, sollten Sie einen Hash-Verlauf verwenden. Wenn Sie einen Hash-Verlauf verwenden, ist der Pfad vor dem Hash der Ort, an dem sich Ihre HTML-Datei befindet, und der Hash wird verwendet, um zu bestimmen, welche Route gerendert werden soll.

Answer 2

Arun, da dieser Zusammenhang war die App auf dem GitHub-Server zu machen, ich glaube nicht, eine Geige würde viel zur Verfügung gestellt hat in Bezug auf das Thema zeigt. Ich habe es herausgefunden, aber ich änderte Route path = "/" zu Route path = "/ stasreactapp", was der Name meines Repositories auf GitHub ist, und den Bezeichner für die URL der GH-Seite. Das bedeutet, dass der lokale Server auf "3000/stasreactapp" laufen muss. Dann habe ich alle Unterrouten in etwas wie "/ home" anstatt nur "home" geändert.

haben diese Änderungen die Wiedergabe auf der GH Seite gelöst, und alles gut jetzt scheint zu funktionieren!

Die Seite selbst ist bei https://mym1990.github.io/reactstasapp/