单击按钮

Question

我正在使用React和React Router构建一个Web应用程序。当前，标头是它自己的组件，并与Page组件一起加载到HomePage容器中。我想通过单击页面组件内标题中的按钮来呈现新组件

这是我现在拥有的主页容器

import React from 'react';
import Page1 from './Page1';
import Page2 from './Page2';
import Page3 from './Page3';
import Page4 from "./Page4";
import {Header} from "../components/Header";

export default class MAINHome extends React.Component {
    constructor(props) {
        super();
    }

    render() {
        return (
            <div>
                <Header/>
                <Page1/>
                <Page2/>
                <Page3/>
                <Page4/>
            </div>
        );
    }
}

            <div id="header" className="container-fluid">

                <div className="row">
                    <div className="col-md-4" id="logo-col">
                        <img src={require("../assets/LOGO.png")} alt=""/>
                    </div>
                    <div className="col-md-8 d-flex justify-content-end" id="nav-col">
                        <ul>
                            <li>
                                <Link to="/trees" id="trees-adopted-nav">
                                    300+ TREES ADOPTED
                                </Link>
                            </li>
                            <li>
                                <a href="#" className="about-us">
                                    ABOUT US
                                </a>
                            </li>
                            <li>
                                <a href="#" className="about-trees">
                                    ABOUT TREES
                                </a>
                            </li>
                            <li>
                                <a href="#" className="contact-us">
                                    CONTACT US
                                </a>
                            </li>
                        </ul>
                    </div>
                    <Route path="/trees" exact="exact" component={AdoptTrees} />
                </div>

            </div>
        </Router>

这将在标题本身内部呈现一个组件，但是我希望它通过替换

而不是整个主页本身呈现

<div>
     <Header/>
     <Page1/>
     <Page2/>
     <Page3/>
     <Page4/>
</div>