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

Question

[Марат Иванов]

Есть 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>
  );
};

Comments

[hzzzzl]

не по теме, но

className={`grid-header ${props.wide && "wide"}`}
// будет добавляться класс false, если нет props.wide 

// пиши так
className={`grid-header ${props.wide ? "wide" : ''}`}

[Петр Мухуров]

hzzzzl, тогда уж лучше

import cx from "classnames";
...
const { className, wide } = props;

const cl = {
  "grid-header": true,
  wide: !!wide
};
...
className={cx(cl, className)}

Answer 1

[Антон Спирин]

Рассмотрите вариант с переносом общих элементов на уровень выше:

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