特定のコンポーネントを手動でレンダリングして特定のルート内で他のコンポーネントを除外する方法

Question

私はHeaderとFooterのコンポーネントを持ち、周囲の内部ページに使用しています。

私はLoginコンポーネントも持っています。これはユーザーがログインしていないときに表示されます。このコンポーネントはHeaderまたはFooterコンポーネントを実装していません。

問題は、コンポーネントでHeaderとFooterのコンポーネントがレンダリングされないようにすることができないという問題です。私はLoginコンポーネントを単独でレンダリングすることを除外できません。

私はSwitchタグを試しましたが、うまく動作しませんでした。

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

あなたはHeaderとFooterのコンポーネントが含まれているために、ログインコンポーネントに平行で新しいコンポーネントを追加する必要があります。

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

及びレイアウト：

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