Wie Header-Komponente in react-Router-Dom ausblenden?

Question

Ich habe eine React App wie diese here Ich möchte die globale Header-Komponente von Seite wie Login und Anmeldung ausblenden. Ich finde dafür in React-Router-v4 keinen Ansatz über das Internet. Könnte jemand bitte etwas Licht auf mich werfen, um weiterzugehen?

const App =() => (
    <Router> 
    <div className="app-wrapper"> 
     <Header /> 
     <main> 
     <Route path="/" exact component={Home} /> 
     <Route path="/login" exact component={Login} /> 
     <Route path="/contact" component={Contact} /> 
     </main> 
     <footer> 
     &copy; Acme Inc. 2017 
     </footer> 
    </div> 
    </Router> 
); 

Answer 1

Wenn Sie einfach ausblenden möchten/zeigen den Header den Autorisierungsstatus basiert, können Sie ein Objekt übergeben den Berechtigungsstatus an die Header-Komponente enthält, auf deren Grundlage sie die Menüpunkte machen.

Ich habe die Demo hier gegabelt: https://codesandbox.io/s/pjyl9y17rx

Hier bin ich nur einen Booleschen Wert für Berechtigungsstatus vorbei, aber Sie bekommen die Idee.

Die andere Option, um eine Route zu machen auf dem Weg basiert ist, einen regulären Ausdruck auf dem Weg zu verwenden, die ich unterstützt glauben, dieses Gespräch in Gang: https://github.com/ReactTraining/react-router/issues/391