React.js上位コンポーネントのボタンを隠す

Question

すべてのマイページにはSidebarコンポーネントがあります。 Sidebarには「新規投稿を作成」ボタンがあります。 クリックすると、ボタンはNewDiaryコンポーネントにリダイレクトされます。

<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> 

Sidebar私はNewDiaryを開いて、それがボタンを非表示していたことを知っているように、どのように私はそれを行うことができますか？ 私はReduxを使用していないので、私のアプリは信じられないほど小さいので、それも避けたいと思います。

Answer 1

あなたの小道具から現在のパスを取得し、あなたのNewDiaryページのパスまたはルータを使用して条件を作ります。

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

Answer 2

サイドバーComponent現在のルートを確認します。

const currentPath = this.props.location.pathname 

NewDiaryの場合は、ボタンを表示しないでください。子コンポーネント（Routerによってレンダリングされる）からSideBarコンポーネントに渡すことができます。

Answer 3

正しい方向に私を向ける答えに感謝します。

もう一つの障害は、this.props.locationが定義されていないことです。 私はちょっと調べて、SidebarコンポーネントをMatchに入れて、それらの小道具を彼に送ってもらう必要があることを知りました。

だから何私がやったことは<Match pattern='' component={Sidebar} />

は、このようなすべてのパスは、サイドバーをレンダリングし、それにpathnameを下に送ることを追加しました。