动态页面渲染reactjs和模板中的调用函数

如何解决动态页面渲染reactjs和模板中的调用函数

我有几个组成部分。主要组件是 PageTemplate.js ，它描述菜单，搜索栏和网站标题。并且在其他页面内容的中心位置（功能组件会做出反应）。 这个想法是在网站的所有页面上使用模板（ PageTemplate.js ），因为只有一个。并使用其他组件（页面，例如 EditRecord.js，NewRecord.js 等）的内容生成一个块。

我使用了一个React-Router，例如，当我转到 / EditRecord 时，我的内容块在此处呈现了编辑页面（ EditRecord.js ）

现在我已经完成了这样的事情：

页面过渡工作，内容块生成我需要的页面。

但是我有一个很大的问题。例如，存在一个带有表的页面，该表带有data（MainPage.js）。搜索和搜索功能位于模板（PageTemplate.js）中。如何将状态从模板（PageTemplate.js）传输到页面（MainPage.js），以通过模板中的搜索值更改数据表？而且，例如，如果我将在另一页上（在/ NewRecord上为示例）并在PageTemplate中调用搜索功能，那么我该如何告诉React，现在有必要绘制主页面（/）通过搜索结果显示新数据的主页？

非常感谢所有人；）

路由器代码：

import { Main} from './pages/MainPage/Main';
import { EditRecordPage } from './pages/EditRecordPage/EditRecordPage';
import { NewRecord } from './pages/NewRecordPage/NewRecord';

export const routes = [
  {
    path: '/',exact: true,component: Main,},{
    path: '/EditRecord/:id',component: EditRecordPage,{
    path: '/NewRecord/',component: NewRecord,}
];

对页面之一进行编码（名称相同）

import React,{ useState,useEffect } from 'react';
import { PageTemplate } from '../../components/PageTemplate';
import { MainPage } from './MainPage';

export const Main = (props) => {

  return (
    <PageTemplate title={'Main page'} {...props}><MainPage/></PageTemplate>
  )
}

这是PageTemplate.js渲染中的一块，用于渲染页面（主要，编辑等）：

 <Content
     className="site-layout-background"
     style={{
             padding: 24,margin: 0,minHeight: 280,}
 >
    <div {...props}/>//here is the required page(main,edit,new etc)
 </Content>