Рендеринг компонента в другой контейнер при нажатии кнопки

Question

Я использую React и React Router для создания веб-приложения.В настоящее время заголовок является собственным компонентом и загружается в контейнер HomePage с компонентом Page.Я хочу отобразить новый компонент по нажатию кнопки в заголовке внутри компонента страницы

Это контейнер главной страницы, который у меня есть сейчас

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>