Réagir à la navigation du routeur en une demi-page

Question

Je conçois un site web dont l'en-tête est le même pour trois pages. Par défaut, la page poing doit avoir les composants suivants

tête QueryList

et clic d'un bouton présent en-tête du composant QueryList devrait changer pour FindExpert.js. En plus du changement de page, l'URL change également en cliquant sur un bouton.

tête FindExpert

Since est présent dans les deux écrans et je ne veux pas appeler encore et encore le composant dans chaque js file.So, j'ai utilisé opérateur ternaire dans l'en-tête. js fichier afin que je puisse router dans la moitié de la page.

app.js

import React, { Component } from 'react'; 
import {BrowserRouter,Route,Router,Switch} from 'react-router-dom'; 
import {Header} from './Header.js'; 
import {FindExpert} from './FindExpert.js'; 

class App extends Component { 
    render() { 
    return (
     <div> 
     <BrowserRouter> 
      <Switch> 
       <Route exact path="/" component={Header} /> 
      <Route path="/findexpert" component={FindExpert} /> 
      </Switch> 
     </BrowserRouter> 
     </div> 
    ); 
    } 
} 

export default App; 

Header.js

import React, { Component } from 'react'; 
import {Constants} from './constants.js'; 
import {QueryList} from './QueryList.js'; 
import {FindExpert} from './FindExpert.js'; 

export class Header extends React.Component{ 

    constructor(props) { 
     super(props); 
     this.state = { 
     ProfileData: {}, 
      profileImage: "profile-pic.svg", 
     isClicked:false 

     }; 
     this.findExpertClicked = this.findExpertClicked.bind(this); 
     this.findExpertPage=this.findExpertPage.bind(this) 
    } 

      findExpertClicked() { 
     console.log("Find expert clicked"); 
     this.setState({ 
      isClicked:true 
     }) 
    } 

    findExpertPage(){ 
     this.props.history.push('/findexpert'); 
    } 

    render(){ 
     return( 
      <div> 
       <div className="col-md-12 HeaderBar"> 
        <div className="HeaderContent"> 
        </div> 
       </div> 
       <div className="ProfileHeader"> 
        <div className="profileImageDiv">  
         <img src={this.state.profileImage} className="profileImageSrc" alt="Alternate"></img> 
        </div> 
        </div> 
       <div className="headerButtons"> 
        <div className="ExBtnDiv" onClick={this.findExpertClicked}><span className="ExBtn">Find Expert</span></div> 
       </div> 
       </div> 
      <div>{(this.state.isClicked===false)?<div><QueryList/></div> :<div>{this.findExpertPage()}</div>}</div> 
      </div> 
     ) 
    } 
} 

Et FindExpert.js, supposons que je simple Bonjour tout le monde.

import React, { Component } from 'react'; 
import {Header} from './Header.js'; 
import {Constants} from './constants.js'; 

export class FindExpert extends React.Component{ 

    render(){ 
     return( 
      <div>  
       Hello world 
      </div> 
     ) 
    } 
} 

A travers le code ci-dessus, le QueryList vient en dessous de l'en-tête comme prévu, mais quand on clique sur le bouton d'experts de trouver, tout change de page. Puisque je ne veux pas appeler header.js dans les deux fichiers, est-il possible de garder l'en-tête constant et de changer le contenu en dessous ainsi que de changer l'URL lorsque l'on clique sur le bouton Expert.

Answer 1

Vous devez créer des composants séparés pour l'en-tête et le contenu à afficher sur la page d'accueil. Et rendre directement le composant Header à l'intérieur de App.js

De cette façon, le composant Header sera toujours rendu et seul le contenu de la page changera en fonction de l'itinéraire actuel.

Par exemple:

import React, { Component } from 'react'; 
import {BrowserRouter,Route,Router,Switch} from 'react-router-dom'; 
import {Header} from './Header.js'; 
import HomePage from './HomePage.js'; 
import {FindExpert} from './FindExpert.js'; 

class App extends Component { 
    render() { 
    return (
     <div> 
     <Header /> 
     <BrowserRouter> 
      <Switch> 
       <Route exact path="/" component={HomePage} /> 
       <Route path="/findexpert" component={FindExpert} /> 
      </Switch> 
     </BrowserRouter> 
    </div> 
    ); 
    } 
} 

export default App;