Conditionally render DataSearch component

Question

I've built a search ui using ReactiveSearch components and it works great! Now I'm trying to figure out how I can conditionally show the DataSearch component that I have in my Navbar based on the route/view that is being displayed.

For example on my homepage. I have a big DataSearch component search form in a jumbotron and I don't need/want the the DataSearch component that also displays in the Navbar.

I've looked at this and this but I'm not sure how to implement those in the context of the DataSearch component from ReactiveSearch.

UPDATE :

So I've been looking into how I can grab the url from React Router (v4) and it seems I can get it from doing this:

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

So then I thought I could use something like location !== '/' && DataSearch but that doesn't work.

Answer 1

Have you tried any of these?

{condition && <DataSearchComponent/>}

or

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