ルータのナビゲーションを半ページで反応させる

Question

私は、ヘッダーが3ページで同じウェブサイトを設計しています。 は、デフォルトでは、拳のページには、以下のコンポーネント

とQueryListコンポーネントがFindExpert.jsに変更する必要がヘッダーに存在するボタンをクリックするだけで

ヘッダーQueryListを持つ必要があります。 Pageの変更に加えて、URLはボタンのクリックによって変更されます。

ヘッダFindExpert

ヘッダが画面の両方に存在し、私はすべてでfile.SoをJS幾度コンポーネントを呼び出すようにしたくないので、私は、ヘッダに三項演算子を使用します。 jsファイルを作成して、ページの半分にルーティングすることができます。

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

そしてFindExpert.jsでは、私はこんにちは、単純な世界を持っていると仮定します。

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

上記のコードでは、クエリリストはヘッダーの下に表示されますが、[エキスパート検索]ボタンをクリックするとページ全体が変更されます。

両方のファイルでheader.jsを呼びたくないので、ヘッダーを一定に保ち、その下の内容を変更し、エキスパートボタンがクリックされたときにURLを変更する方法があります。

Answer 1

ヘッダーとコンテンツをホームページに表示するために、別々のコンポーネントを作成する必要があります。

このようにヘッダーコンポーネントは常にレンダリングされ、ページコンテンツのみが現在のルートに従って変更されます。例えば

：

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;