Javascript 单击按钮时在不同容器中渲染组件

我正在使用React和React路由器构建一个web应用程序。目前，标题是它自己的组件，并与页面组件一起加载到主页容器中。我想在点击页面组件内标题中的按钮时呈现一个新组件

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

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>
        );
    }
}

从“React”导入React；
从“/Page1”导入第1页；
从“/Page2”导入第2页；
从“/Page3”导入第3页；
从“/Page4”导入第4页；
从“./components/Header”导入{Header}；
导出默认类MAINHome扩展React.Component{
建造师（道具）{
超级（）；
}
render（）{
返回(
);
}
}

300多棵树被采用

这会在标题本身内部呈现一个组件，但我希望它通过替换来呈现，而不是整个主页本身

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

我不知道Page1…Page4是什么，但我敢打赌，你只是复制了一个文件四次，而你真正需要的是一个页面组件，

…

处理。也就是说，看看您是如何使用

的，您可能想重新阅读React Router上的教程，因为这不是您声明路由的方式。它可能是你放置

的地方，但肯定不是

的地方。请你重新表述一下你的问题好吗？我不知道第1页…第4页是什么，但我敢打赌，你只是复制了一个文件四次，而你真正需要的是一个页面组件，

..

处理。也就是说，看看您是如何使用

的，您可能想重新阅读React Router上的教程，因为这不是您声明路由的方式。它可能是你放置

的地方，但肯定不是

的地方。请你重新表述你的问题好吗？

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