Router.push() ändert url aber in 404. Refresh gleiche URL gefangen arbeitet

Question

ich einen Router etwas wie diese:

<Router history={browserHistory}> 
    <Route path="items"> 
    <IndexRoute component={Items} /> 
    <Route path=":id" component={ItemDetail} /> 
    </Route> 
    <Route path="*" component={NotFound} /> 
</Router> 

Meine Items Komponente eine Reihe von Elementen enthält, die jeweils mit einer eindeutigen ID.

Die ItemDetail Komponente ... lässt uns einfach nur die props.params.id auf dem Bildschirm anzeigen.

Wenn ich auf einen Artikel klicke, rufe ich router.push('items/'+id) mit der ID des Artikels an.

Die URL wird korrekt aktualisiert (z.B. */items/1234), noch zeigt es die Komponente NotFound.

Wenn ich dann F5 drücke (d. H. Die URL erneut laden), zeigt es korrekt ItemDetail Komponente.

Irgendeine Idee, warum das der Fall ist? Die URL ist für beide gleich.

(Anmerkung: Wenn ich path=':id' ändern path='*' es auf router.push() auf die richtige Seite geht, aber ich verliere den Zugang zu props.params.id, natürlich.)

(Anmerkung: Wenn ich die alle Pfade ändern, um eine / zu verwenden zu Beginn wird die Navigation sehr gebrochen)

Answer 1

Es scheint, dass router.push() verwendet einen absoluten Pfad (mit einer führenden /) nur.

Durch die Verwendung des relativen Pfads wie oben wurde die URL aktualisiert, der Router wurde jedoch nicht aktualisiert, sodass die Seite nicht angezeigt wurde. Durch Drücken von F5 wurde die gesamte Route geladen und daher die Seite angezeigt.

Deshalb musste ich: router.push('/items/'+id)