有条件地呈现 DataSearch 组件

Question

我已经ui使用 ReactiveSearch 组件搜索 ui，效果很好！现在我想弄清楚如何根据正在显示的 route/view 有条件地显示导航栏中的 DataSearch component。

例如在我的主页上。我在超大屏幕中有一个很大的 DataSearch 组件搜索表单，但我没有 need/want 也显示在导航栏中的 DataSearch 组件。

我看过 this and this 但我不确定如何在 ReactiveSearch 的 DataSearch 组件的上下文中实现这些内容。

更新:

所以我一直在研究如何从 React Router (v4) 中获取 url，看来我可以通过这样做来获取它：

componentWillReceiveProps(nextProps) {
                if (nextProps.location !== this.props.location) {
...

然后我想我可以使用类似 location !== '/' && DataSearch 的东西，但那不起作用。

Answer 1

你试过这些吗？

{condition && <DataSearchComponent/>}

或

{condition ? <DataSearchComponent/> : <OtherComponent/>}