reactjs - 当链接在组件内部时，如何更改页面内容？

Question

如果我看起来很困惑，请提前抱歉，这是因为我很困惑。

所以从我的 App.js 文件中，它就像我调用所有组件并查询我的数据库的主文件，然后由 index.js 文件调用。

这是我的渲染方法。

render() {
    return (
        <div className="site" >
            {
                !!!this.state.done ? (
                    <LoadingSVG />
                ) : (
                        <div className="page">
                            <div className="header-wrapper">
                                <Header data={this.state.dataHeader} />
                            </div>
                            <div className="project-list-wrapper">
                                <ProjectList data={this.state.dataProjects} />
                            </div>
                        </div>
                    )
            }
        </div >
    )
}

在 Projectlist 组件中，我遍历每个项目并创建一个项目。

    render() {
    return (
        <div className="project-list module">

            <div className="sectionTitle">Project I've worked on</div>

            {this.props.data.map((res, i) => (
                <div className="project-wrapper">
                    <div className="inner-ctn">
                        <div className="header">
                            <div className="number">0{res.id + 1}</div>
                            <div className="name">{res.nomProjet}</div>
                        </div>
                        <div className="item-ctn">
                            <div className="categ">{res.categProjet}</div>
                            <div className="roles">{res.roles}</div>
                            <div className="date">{res.date}</div>
                        </div>

                    </div>
                </div>
            ))
            }
        </div>
    );
}

我想要做的是使用转换组，渲染另一个组件..让我们称之为 Project-1。项目 1 将刷新我的 App.js 内容，以便呈现新组件。但我不能这样做，因为 App.js 是 ProjectList 的父级。我也想保持一个结构良好的项目，所以我不想把所有东西都放在一个文件中。

我试着阅读文档，基本上每一篇关于如何做到这一点的文章，我似乎都无法理解这应该如何工作。这应该很容易，但是在两个页面之间进行转换甚至链接是非常复杂的。

标签： reactjsreact-router