在半個頁面中反應路由器導航

我正在設計一個網站，其中三個頁面的標題相同。默認情況下，拳頭頁面都應該有以下組件在半個頁面中反應路由器導航

頁眉QueryList

和存在於頭一個按鈕QueryList組件應更改爲FindExpert.js的點擊。隨着Page的變化，URL也隨着點擊一個按鈕而改變。

頁眉FindExpert

因爲頭是同時出現在屏幕上，我不希望在每一個js的file.So一次又一次地調用組件，我在報頭中使用三元運算符。 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，假設我有一個簡單的Hello World。

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

通過上面的代碼，QueryList出現在預期的Header下面，但是當點擊查找專家按鈕時，整個頁面都會改變。

因爲我不想在兩個文件中調用header.js，有沒有一種方法可以保持標題不變並更改下面的內容，以及在點擊專家按鈕時更改url。

來源

2017-09-13 Aayushi

您必須爲標題和要在主頁上顯示的內容創建單獨的組件。並直接在App.js中顯示Header組件

這樣Header組件將始終呈現並且只有頁面內容會根據當前路線而改變。

例如：

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;

來源

2017-09-18 02:20:38 subhamagarwal

在半個頁面中反應路由器導航

回答

相關問題