reactjs - 与 FlowRouter react : How to show/hide component based on route

我有一个使用 Meteor 开发的 React 应用程序，我使用 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/1
/chatroom/2
/chatroom/3

如果路由是 <Footer /> ，我有没有办法隐藏 /chatroom/<anything> 组件？

最佳答案

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

如果<anything>后面的/chatroom/部分(我假设它是一个参数)不重要，并且如果你没有任何其他以chatroom开头的路由，你可以试试这个:

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

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

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

如果 <anything> 部分很重要和/或您有其他以聊天室开头的路由，您可以先获取路由的参数

const param = FlowRouter.getParam('someParam');

然后通过检查当前路径是否包含 chatroom/:param 来进行条件渲染，如下所示:

  const currentPath = window.location.pathname
{!currentPath.includes(`chatroom/${param}`) ? <Footer /> : 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>
            )
        }
    }

关于reactjs - 与 FlowRouter react : How to show/hide component based on route，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41384686/