Reactjs 与FlowRouter反应：如何基于路由显示/隐藏组件

我有一个使用

React

开发的

Meteor

应用程序，我使用

FlowRouter

进行路由。我的项目主

AppContainer

有一系列组件，其中一个是页脚

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

---

如果路由是

/chatroom/

，是否有办法隐藏

组件

您可以通过检查当前路径来执行条件渲染

如果

部分（我假设它是一个参数）在

/chatroom/

之后不重要，并且如果您没有任何其他以chatroom开头的路由，您可以尝试此路由：

 const currentPath = window.location.pathname
{!currentPath.includes('chatroom') ? <Footer /> : null }

然后通过检查当前路径是否包含聊天室/：param来执行条件呈现，如下所示：

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

  const currentPath = window.location.pathname
{!currentPath.includes(`chatroom/${param}`) ? <Footer /> : null }

const currentPath=window.location.pathname
{！currentPath.includes（`chatroom/${param}`）？：null}

所以你的代码看起来像这样

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

类AppContainer扩展组件{
render（）{
const currentPath=window.location.pathname
const param=FlowRouter.getParam（'someParam'）；
返回(
{this.props.content}
{！currenPath.includes（`chatroom/${param}`）
?  
：null}
)
}
}

您也可以使用以下语法。它完成了与Cagri Yardimci提供的第一个示例相同的事情

{ !currentPath.includes('chatroom') && <Footer /> }

{！currentPath.includes（'chattroom'）&&}

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

{ !currentPath.includes('chatroom') && <Footer /> }