在一半页面上反应路由器导航

Question

I am designing a website in which the header is the same for three pages. By default the fist page should have the following components

Header QueryList

and on click of a button present in Header the QueryList component should change to FindExpert.js. Along with the change in Page, the URL also changes on the click of a button.

Header FindExpert

Since header is present in both the screens and I don't want to call the component again and again in every js file.So, I used ternary operator in the header.js file so that I can route in half of the 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>
        )
    }
}

And in FindExpert.js, suppose I have a simple 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>
        )
    }
}

Through the above code, the QueryList comes below the Header as expected but when clicked on the find expert button, the whole page changes.

Since I don't want to call header.js in both the files, is there a way to keep the header constant and change the contents below it as well as change the url when find expert button is clicked.

Answer 1

You have to create separate components for Header and the content to be shown on the homepage. And directly render the Header component inside App.js

This way Header component will always be rendered and only the page content would change according to the current route.

For example:

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;