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

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 /> }