2017-03-16 1 views
2

Folgen Sie den hier angegebenen Beispielen https://reacttraining.com/react-router/examples/url-params.React Router 4 Link Zur Aktualisierung der URL-Leiste

ich meine eigene Route für meine Website wie so aufgebaut:

<Router> 
    <div> 
    <Route path='/' exact component={Layout} /> 
    <PublicRoute authed={this.state.authed} exact path='/login' component={Login} /> 
    <PublicRoute authed={this.state.authed} exact path='/register' component={Register} /> 
    <PrivateRoute authed={this.state.authed} path='/dashboard' component={Dashboard} /> 
    <Route path='/cachaca/:bottle' component={Layout} /> 

    <Route render={() => <h3>No Match</h3>} /> 
    </div> 
</Router> 

Das zum Beispiel ziemlich ähnlich ist die Tatsache gegeben, außer dass die Navigation (oder einen Link zu) auf der Seite irgendwo anders ist.

Die Route selbst funktioniert einwandfrei. Ich kann Spielinformationen erhalten, ich kann erfolgreich überprüfen, ob ein Benutzer angemeldet ist oder nicht und so weiter.

Mein einziges Problem ist, dass sich die URL-Leiste nicht ändert, um die Navigationsänderungen widerzuspiegeln. Wenn ich also bei localhost: 3000/cachaca/1234 sitze und klicke, um nach Hause zu gehen, lädt die Homepage nur die URL-Leiste wird weiterhin "localhost: 3000/cachaca/1234" anzeigen.

ich Ähnliche Beiträge zu Mine gesehen habe von reagieren Router 2/3, die darauf hindeuten, dass die Geschichte prop ist das, was dieses Problem verursacht - aber ich glaube nicht, dass der Fall in Router seine 4.

Außerdem funktioniert das Beispiel in der react training website und meins (was anscheinend den gleichen Schritten folgt) nicht.

Fehle ich hier etwas? Warum bekomme ich nicht die gleichen Ergebnisse wie auf der Trainings-Website?

Hier ist der Navigationslink ich verwende:

<Link to={"/"}>Home</Link> 

Jede mögliche Hilfe schätzen, Dank!

Antwort

1

Wow, das ist albern - aber ich in dieser meiner ganzen Tag verschwendet so ist dies in der Hoffnung, Post wird noch einige Zeit zu sparen jemand anderes:

stellt sich heraus, es funktioniert nicht, weil ich meine Prüfung tat auf Der webpack-dev-server/folder und react-router 4 scheint damit ein Problem zu haben.

Sobald ich von http://localhost:3000/webpack-dev-server/cachaca/asdf zu http://localhost:3000/cachaca/asdf ging, begann die Website sich so zu verhalten, wie es sollte - sowohl im Inhalt als auch in der URL-Leiste.

Happy Codierung für alle!

Verwandte Themen