React.js Verstecken einer Schaltfläche in einer höheren Komponente

Question

Ich habe eine Sidebar Komponente, die in allen meinen Seiten vorhanden ist. Diese Sidebar hat eine Schaltfläche "Create New Post". Wenn Sie darauf klicken, wird die Schaltfläche auf die Komponente NewDiary umgeleitet.

<HashRouter> 
    <div className='app'> 
     <div id='wrapper'> 
     <div id='content' className='mobileUI-main-content'> 
      <div id='content-inner'> 
      <Match exactly pattern='/entry/new' component={NewDiary} /> 
      <Match exactly pattern='/entry/:id' component={DiaryDetails} /> 
      <Match exactly pattern='/' component={LandingPage} /> 
      </div> 
     </div> 
     <Sidebar /> 
     </div> 
    </div> 
    </HashRouter> 

Wie kann ich es machen, so dass die Sidebar weiß, dass ich NewDiary geöffnet haben und haben es auf den Button verbergen? Ich verwende nicht Redux und ich möchte es auch vermeiden, da meine App unglaublich klein ist.

Answer 1

Versuchen Sie, den aktuellen Pfad von Ihren Requisiten zu erhalten, und stellen Sie die Bedingung mit Ihrem Pfad oder Router von Ihrer NewDiary-Seite her.

const currentPath = this.props.location.pathname 
    return (
    <div> 
     {if currentPath === '/entry/new' ?<YourButtonComponent /> : null} 
    </div> 
    ) 

Answer 2

In der Sidebar Component überprüfen, was die aktuelle Route ist.

const currentPath = this.props.location.pathname 

Wenn es das mit NewDiary ist, rendern Sie die Schaltfläche nicht. Sie können dies von Ihrer untergeordneten Komponente (die von der Router gerendert wird) an die Komponente SideBar übergeben.

Answer 3

Dank den Antworten für mich in die richtige Richtung.

Ein weiterer Stolperstein war, dass this.props.location undefiniert war. Ich suchte ein bisschen herum und fand heraus, dass ich die Sidebar Komponente in eine Match einschließen musste, um diese Requisiten an ihn herunter zu schicken.

Also, was ich tat, war <Match pattern='' component={Sidebar} />

Solche hinzufügen, dass jeder Weg der Sidebar macht und senden Sie die pathname, um es nach unten.