React with FlowRouter: How to show/hide component based on route - reactjs

Question

I have a Meteor application that I'm developing using React and I do my routing using FlowRouter. My main AppContainer for the project has a bunch of components, one of them being the footer.
class AppContainer extends Component {
render() {
return(
<div className="hold-transition skin-green sidebar-mini">
<div className="wrapper">
<Header user={this.props.user} />
<MainSideBar />
{this.props.content}
<Footer />
<ControlSideBar />
<div className="control-sidebar-bg"></div>
</div>
</div>
)
}
}
I have a few routes that go to various chat rooms:
Eg.
/chatroom/1
/chatroom/2
/chatroom/3
Is there a way for me to hide the <Footer /> component if the route is a /chatroom/<anything>?

Answer 1

You can maybe do a conditional rendering by checking the current path.
If the <anything> part (I assume it is a parameter) after the /chatroom/ is not important, and if you do not have any other routing that starts with chatroom, you can try this one:
const currentPath = window.location.pathname
{!currentPath.includes('chatroom') ? <Footer /> : null }
So your code would look like this:
class AppContainer extends Component {
render() {
currentPath = window.location.pathname
return(
<div className="hold-transition skin-green sidebar-mini">
<div className="wrapper">
<Header user={this.props.user} />
<MainSideBar />
{this.props.content}
{!currentPath.includes('chatroom')
? <Footer />
: null }
<ControlSideBar />
<div className="control-sidebar-bg"></div>
</div>
</div>
)
}
}
If <anything> part is important and/or you have other routes that starts with chatroom, you can first get the parameter of the route with
const param = FlowRouter.getParam('someParam');
and then do the conditional rendering by checking if the current path contains the chatroom/:param like this:
const currentPath = window.location.pathname
{!currentPath.includes(`chatroom/${param}`) ? <Footer /> : null }
So your code would look like this
class AppContainer extends Component {
render() {
const currentPath = window.location.pathname
const param = FlowRouter.getParam('someParam');
return(
<div className="hold-transition skin-green sidebar-mini">
<div className="wrapper">
<Header user={this.props.user} />
<MainSideBar />
{this.props.content}
{!currenPath.includes(`chatroom/${param}`)
? <Footer />
: null }
<ControlSideBar />
<div className="control-sidebar-bg"></div>
</div>
</div>
)
}
}

Answer 2

You can also use the following syntax below. It accomplishes the same thing as the first example provided by Cagri Yardimci.
{ !currentPath.includes('chatroom') && <Footer /> }