Блог

У меня есть несколько компонентов. Основным компонентом являетсяPageTemplate.js , который описывает меню, панель поиска и заголовок сайта. А также место в центре для содержимого других страниц (функциональные компоненты react). Идея состоит в том, чтобы использовать шаблон(PageTemplate.js ) на всех страницах сайта, поскольку есть только одна. И генерировать блок с содержимым из других компонентов (страниц, например.EditRecord.js , NewRecord.js и т.д.).

Я использую react-router и, например, при переходе в / EditRecord, мой блок содержимого отображал страницу редактирования (EditRecord.js ) там

Теперь я сделал это примерно так:

Переходы страниц работают, и блок содержимого генерирует нужную мне страницу.

но у меня огромная проблема. Например, есть страница с таблицей с данными(MainPage.js ). А поиск и функция поиска расположены в шаблоне(PageTemplate.js ). Как я могу передать состояние из шаблона(PageTemplate.js ) на страницу(MainPage.js ) чтобы изменить таблицу данных там по значению поиска из шаблона? А также, если я, например, буду находиться на другой странице (пример в /newRecord) и вызову функцию поиска в PageTemplate, то как я могу сообщить react, что теперь необходимо нарисовать главную страницу (/) MainPage с новыми данными по результатам поиска?

Большое спасибо всем заранее;)

код маршрутизатора:

 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',
    exact: true,
    component: EditRecordPage,
  },
  {
    path: '/NewRecord/',
    exact: true,
    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>