Comment masquer le composant d'en-tête dans react-router-dom?

Question

Je possède une application React comme celle-ci ici Je veux masquer le composant d'en-tête global des pages comme Login et Signup. Je ne trouve aucune approche pour cela dans React-Router-v4 sur internet. Est-ce que quelqu'un pourrait m'éclairer sur la manière de procéder?

const App = () => (

        © Acme Inc. 2017

);

Answer 1

Vous pouvez utiliser le composant d'ordre supérieur withRouter pour accéder à l'objet props.location dans votre composant App et vérifier si l'utilisateur se trouve sur la page de connexion ou d'inscription en utilisant props.location.pathname

gardez à l'esprit que vous n'avez pas besoin d'utiliser le composant withRouter si votre composant dans lequel vous souhaitez accéder à props.match ou à l'objet props.location est rendu par

import {Route, withRouter} from 'react-router-dom'
const App = () => (

     {
      props.location.pathname!=='/login' ? :''
     }

        © Acme Inc. 2017

);

export default withRouter(App);

Answer 2

Si vous souhaitez simplement masquer / afficher l'en-tête en fonction de l'état d'autorisation, vous pouvez passer un objet contenant l'état d'autorisation au composant Header en fonction duquel il rendra les éléments de menu.

J'ai forké la démo ici: https://codesandbox.io/s/pjyl9y17rx

Ici, je ne passe qu'une valeur booléenne pour l'état d'autorisation, mais vous avez l'idée.

L'autre option pour rendre une route en fonction du chemin est d'utiliser une expression régulière dans le chemin, ce que je crois est pris en charge, en se basant sur cette conversation: https://github.com/ReactTraining/react-router/issues/391