2016-11-03 8 views
1

Es scheint einige Unstimmigkeiten zwischen verschiedenen Quellen darüber zu geben, wie der Pfadname der aktuellen URL mithilfe von React Router am effizientesten ist (unter Verwendung von browserHistory10). Im Folgenden ist ein Ausschnitt aus meinem Provider und Routen:Erhalten des Pfadnamens der aktuellen Route in React Router mit browserHistory

ReactDOM.render(
     <Provider store={Store}> 
      <Router history={browserHistory}> 
       <Route path="/tools/customer-lookup" component={CustomerLookupApp} /> 
       <Route path="/tools/customer-lookup/profile/:id" component={CustomerLookupProfileWrapper} /> 
       <Route path="/tools/customer-lookup/profile/:id/store/:storeid" component={CustomerLookupStoreProfileWrapper} /> 
       <Route path="/tools/customer-lookup/profile/:id/store/:storeid/transaction/:transid" component={CustomerLookupStoreItemsWrapper} /> 
      </Router> 
     </Provider>, 
     document.getElementById('customer-lookup-main')); 
}); 

Versuchte this.props.location.pathname in verschiedenen Komponenten der Anmeldung aber immer undefiniert aufkommt. Das Gleiche gilt für this.context.

Jeder Rat wird geschätzt, danke.

+0

Ihre Codes scheinen korrekt, außer dass Ihre Routenpfade etwas überflüssig sind. Sie können untergeordnete Routen verwenden, um die Pfadlänge zu verringern. Sie können die vollständigen Codes für debugging.red –

+0

@JasonXu veröffentlichen, außer dass ich versuche, ** eine Komponente innerhalb eines anderen zu verschachteln, wenn ich auf eine untergeordnete Route reise. Vielmehr sind die Routen (obwohl ich zustimme, dass sie schrecklich redundant aussehen) mit einer völlig anderen Ansicht der einzelnen Seiten-App verknüpft und verwenden nicht unbedingt irgendeine der Elternkomponenten. Wenn es einen besseren Weg gibt, ** das ** zu erreichen und immer noch Routen zu verschachteln, interessiert mich das. – Jose

Antwort

0

Die Eigenschaft this.props.location.pathname ist in "verschiedenen" Komponenten nicht verfügbar, sie steht nur in den Komponenten zur Routenübergabe zur Verfügung. h. CustomerLookupApp, CustomerLookupProfileWrapper, CustomerLookupStoreProfileWrapper, CustomerLookupStoreItemsWrapper.

Wenn Sie den Pfadnamen weiter unten im Baum benötigen, können Sie ihn als Requisiten übergeben.

+0

Kann ich es noch so weitergeben? '' Ich bekomme ein 'undefined' auf' this'. – Jose

Verwandte Themen