2017-12-31 150 views
1

In meinem Kopf,Reactstrap oder React-Router v4 ist nicht für eine Teiladress Link Änderung

<NavItem> 
    <NavLink tag={Link} to="/template/editor">New Template</NavLink> 
</NavItem> 

In meiner Router Seite

<BrowserRouter> 
    <div className="container-fluid"> 
    <Header /> 
    <section className="page-content"> 
     <Route exact path="/" component={HomePage} /> 
     <Route exact path="/template/editor/:id?" component={Authenticate(EditorPage)} /> 
    </section> 
    </div> 
</BrowserRouter> 

Wenn ich auf meiner Homepage (/) wird umgeleitet und Klicken Sie auf den Link Neue Vorlage (/ template/editor), um zur Seite Neue Vorlage weitergeleitet zu werden. Wenn ich jedoch aktiv bin (/ template/editor/3) und auf den New Template Link (/ template/editor) klicke, wird die Adressleiste zwar aktualisiert, aber die Seite wird nicht weitergeleitet. Ich bin sicher, ich vermisse etwas Einfaches, aber ich kann nicht herausfinden, was.

+0

verwenden Sie react-redux und 'connect' vielleicht? – Tomasz

+0

@Tomasz ja, warum? – SILENT

+0

vielleicht hängt es damit zusammen: https://stackoverflow.com/questions/43895805/reac-router-4-does-not-update-view-on-link-but-does-on-refresh – Tomasz

Antwort

1

Ich bin mir nicht sicher, was das Problem ist, aber ich glaube, dass das, was Sie versucht zu tun ist:

<BrowserRouter> 
    <div className="container-fluid"> 
    <Header /> 
    <section className="page-content"> 
     <Switch> 
     <Route exact path="/" component={HomePage} /> 
     <Route path="/template/editor/:id?" component={Authenticate(EditorPage)} /> 
     </Switch> 
    </section> 
    </div> 
</BrowserRouter> 

(Hinweis I Switch von react-router-dom Paket verwendet)

auch, Sie sagten, Sie sind Unter Verwendung react-redux gibt es ein bekanntes Problem mit einer nicht aktualisierenden Ansicht. Look at this question.

+0

Es sieht aus wie mein Problem . Ich habe den Schalter betätigt. Ich zögere jedoch, pure: false wegen der Leistung zu verwenden. Gibt es einen "richtigen Weg" sollte ich die App so entwerfen, dass ich dieses Problem nicht habe? Ist die Option withRouter der bessere Weg? – SILENT

+0

@SILENT Ja, das ist ein bisschen "hacky". Die 'connect'-Funktion vergleicht Props und wenn nichts geändert wurde, wird sie nicht erneut gerendert (auch wenn sich die App-Position geändert hat). Sie müssen 'connect' anweisen, immer mit' {pure: false} 'zu rendern, oder ... alternativ können Sie' withRouter' verwenden (wie in Frage ich verlinkt erklärt), um Reac-Router-Requisiten zu übergeben, die sich bei einer Standortänderung ändern . – Tomasz

+1

Ich habe jetzt Navigationsanforderungen durch mein Redux laufen. So konnte ich der Hacky-Methode entkommen. – SILENT

Verwandte Themen