javascript - 在半页中 react 路由器导航

Question

我正在设计一个网站，其中三个页面的标题相同。默认情况下，第一页应具有以下组件

Header QueryList

单击标题中的按钮后，QueryList 组件应更改为 FindExpert.js。随着页面的变化，点击按钮时 URL 也会发生变化。

Header FindExpert

由于 header 出现在两个屏幕中，我不想在每个 js 文件中一次又一次地调用该组件。因此，我在 header.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;

标题.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>
        )
    }
}

通过上面的代码，查询列表按预期出现在标题下方，但是当单击“查找专家”按钮时，整个页面都会发生变化。

由于我不想在这两个文件中调用 header.js，有没有办法保持 header 不变并更改其下面的内容，并在单击“查找专家”按钮时更改 url。

Answer 1

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