Comment rendre un composant spécifique et en exclure d'autres dans un itinéraire spécifique

Question

J'ai les composants Header et Footer, qui sont utilisés pour les pages internes environnantes.

J'ai également un composant Login, qui apparaît lorsque l'utilisateur n'est pas connecté. Ce composant n'implémente pas les composants Header ou Footer.

Le problème est que je ne peux pas empêcher les composants Header et Footer d'être rendu avec le composant Login. Je ne peux pas exclure le composant Login à rendre seul.

J'ai essayé le tag Switch, mais je n'ai pas réussi à le faire fonctionner.

import React, { Component } from 'react'; 
import { BrowserRouter, Route } from 'react-router-dom'; 
import { connect } from 'react-redux'; 
import * as actions from '../actions'; 

import Header from "./Header"; 
import Footer from "./Footer"; 
import Login from "./Login"; 
import manageCategories from "./manageCategories"; 

class App extends Component { 
    componentDidMount() { 
     this.props.fetchUser(); 
    } 
    render() { 
     return (
      <div> 
       <BrowserRouter> 
        <div> 
         <Route exact path="/login" component={Login} /> 
         <Header /> 
         <Route exact path="/manage-categories" component={manageCategories} /> 
         <Footer /> 
        </div> 
       </BrowserRouter> 
      </div> 
     ); 
    } 
} 

export default connect(null, actions)(App); 

Answer 1

Vous devez ajouter un nouveau composant qui est parallèle à l'élément de connexion pour contenir les composants Header et Footer.

<Route path="/home" component={Layout}/> 
<Route exact path="/login" component={Login}/> 

et la mise en page:

render() { 
     return <div> 
      <Header /> 
      <Route exact path={this.props.match.path} component={Home} /> 
      <Route path={`${this.props.match.path}/manageCategories`} component={manageCategories} /> 
      <Route path={`${this.props.match.path}/other`} component={otherComponent} /> 
      <Footer /> 
     </div> 
    }