Как правильно сделать страницы SPA на реакте?

Есть Header, боковое Menu, и поле Content. Сделаны компоненты которые принимают в пропсы данные, типа:

export const Header = props => (
  <div className={`grid-header ${props.wide && "wide"}`}>
    {props.top}
    <div className="grid-header-content">{props.content}</div>
  </div>
);

Какая должна быть структура проекта? чтоб по роутеру менялись страницы в Content, роутер находится в APP, сответственно подгружаются в каждую страницу все три компонента. правильно ли так делать? Как подгружать пропсы и где они должны храниться/ и как подгружаться?
При таком построении страницы - идет перерендер всего приложения а не только Content при переходе по роутеру.

const Home = () => {
  useEffect(() => {
    document.title = "Привет";
  }, []);

  return (
    <Page wide={true}>
      <Header top={<Top />} />
      <SideNav>
        <LeftMenu />
      </SideNav>
      <Content>
        <Overview />
      </Content>
    </Page>
  );
};
  • Вопрос задан
  • 118 просмотров
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
Рассмотрите вариант с переносом общих элементов на уровень выше:
const App = () => {
  return (
    <Page wide={true}>
      <Header top={<Top />} />
      <SideNav>
        <LeftMenu />
      </SideNav>
      <Content>
        <Switch>
          <Route path="/" component={Home} />
        </Switch>
      </Content>
    </Page>
  );
};


Тем не менее, если вы уверены, что выбрали наиболее подходящий для вашего проекта подход, то общую часть можно перенести в отдельный компонент:
const PageLayout = ({ wide, top, children }) => {
  return (
    <Page wide={wide}>
      <Header top={top ? top : <Top />} />
      <SideNav>
        <LeftMenu />
      </SideNav>
      <Content>
        {children}
      </Content>
    </Page>
  );
};


Тогда код страниц сократится до:
const Home = () => {
  useEffect(() => {
    document.title = "Привет";
  }, []);

  return (
    <PageLayout wide>
      <Overview />
    </PageLayout>
  );
};

Для работы с head советую использовать react-helmet
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы