在半个页面中反应路由器导航

问题描述：

我正在设计一个网站，其中三个页面的标题相同。默认情况下，拳头页面都应该有以下组件在半个页面中反应路由器导航

页眉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。

答

您必须为标题和要在主页上显示的内容创建单独的组件。并直接在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;

在半个页面中反应路由器导航

相关推荐