Réagir avec FlowRouter: Comment afficher / masquer le composant en fonction de l'itinéraire

Barry Michael Doyle

J'ai une Meteorapplication que je développe en utilisant Reactet je fais mon routage en utilisant FlowRouter. Mon principal AppContainerpour le projet a un tas de composants, l'un d'eux étant le pied de page.

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

J'ai quelques itinéraires qui mènent à divers salons de discussion:

Par exemple.

/chatroom/1
/chatroom/2
/chatroom/3

Y a-t-il un moyen pour moi de masquer le <Footer />composant si l'itinéraire est un /chatroom/<anything>?

Assistant d'appel

Vous pouvez peut-être faire un rendu conditionnel en vérifiant le chemin actuel.

Si la <anything>partie (je suppose que c'est un paramètre) après le /chatroom/n'est pas importante, et si vous n'avez pas d'autre routage qui commence par le chat, vous pouvez essayer celui-ci:

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

Donc, votre code ressemblerait à ceci:

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

Si la <anything>partie est importante et / ou que vous avez d'autres itinéraires qui commencent par le chat, vous pouvez d'abord obtenir le paramètre de l'itinéraire avec

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

puis faites le rendu conditionnel en vérifiant si le chemin actuel contient le chatroom /: param comme ceci:

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

Donc votre code ressemblerait à ceci

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

Articles connexes