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

在SideBar Component中查看当前路线是什么。

const currentPath = this.props.location.pathname

如果是具有NewDiary的那个，请不要渲染按钮。您可以将此子组件（由Router呈现）传递给SideBar组件。

Answer 2

尝试从道具中获取当前路径，并使用NewDiary页面中的路径或路由器创建条件。

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

Answer 3

感谢你给我指出正确方向的答案。

另一个绊脚石是this.props.location未定义。我搜索了一下，发现我必须在Sidebar中加入Match组件才能将这些道具发送给他。

所以我做的是添加<Match pattern='' component={Sidebar} />

这样每条路径都会呈现补充工具栏并向其发送pathname。

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

3 个答案: