javascript - React.js 在更高的组件中隐藏按钮

Question

我有一个 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>

我怎样才能让侧边栏知道我已经打开NewDiary并让它隐藏按钮？我没有使用 Redux，我也想避免使用它，因为我的应用程序非常小。

Answer 1

尝试从你的 props 中获取当前路径，并使用 NewDiary 页面中的路径或路由器设置条件。

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