В этой статье блога мы погрузимся в мир динамических макетов с использованием React и React Router Dom v6. Динамические макеты позволяют нам легко переключаться между различными макетами страниц в зависимости от текущего маршрута, обеспечивая удобство работы с пользователем. Мы рассмотрим различные методы и приемы создания динамических макетов, а также приведем примеры кода для каждого подхода.

Метод 1: рендеринг компонентов на основе маршрута
Один из самых простых способов реализации динамических макетов — рендеринг различных компонентов на основе текущего маршрута. Мы можем добиться этого, используя компонент <Route>из React Router Dom v6. Вот пример:

import { Route } from 'react-router-dom';
const App = () => {
  return (
    <div>
      <Route path="/" exact component={HomePage} />
      <Route path="/about" component={AboutPage} />
      <Route path="/contact" component={ContactPage} />
    </div>
  );
};

В этом примере мы визуализируем различные компоненты в зависимости от пути маршрута. Вы можете определить свои собственные компоненты для каждой страницы и передать их как свойство componentв компонент <Route>.

Метод 2: оболочка компонента макета
Другой подход заключается в создании компонента макета, который действует как оболочка для компонентов вашей страницы. Это позволяет инкапсулировать общие элементы макета, такие как верхние, нижние колонтитулы или боковые панели, и делает ваш код более организованным. Вот пример:

import { Route } from 'react-router-dom';
const Layout = ({ children }) => {
  return (
    <div>
      <Header />
      {children}
      <Footer />
    </div>
  );
};
const App = () => {
  return (
    <div>
      <Route path="/" exact>
        <Layout>
          <HomePage />
        </Layout>
      </Route>
      <Route path="/about">
        <Layout>
          <AboutPage />
        </Layout>
      </Route>
      <Route path="/contact">
        <Layout>
          <ContactPage />
        </Layout>
      </Route>
    </div>
  );
};

В этом примере мы обертываем каждый компонент страницы компонентом Layout, который отображает общие элементы макета. Свойство childrenпредставляет отображаемый компонент страницы.

Метод 3: Контекст макета
Используя API контекста React, мы можем создать контекст макета, который предоставляет информацию о текущем макете его дочерним компонентам. Это позволяет нам динамически менять макет на основе текущего маршрута. Вот пример:

import { createContext, useContext } from 'react';
import { Route } from 'react-router-dom';
const LayoutContext = createContext();
const LayoutProvider = ({ children }) => {
  const currentLayout = determineLayout(); // Implement your logic to determine the layout based on the route
  return (
    <LayoutContext.Provider value={currentLayout}>
      {children}
    </LayoutContext.Provider>
  );
};
const LayoutWrapper = ({ children }) => {
  const currentLayout = useContext(LayoutContext);
  return <div className={`layout-${currentLayout}`}>{children}</div>;
};
const App = () => {
  return (
    <LayoutProvider>
      <div>
        <Route path="/" exact>
          <LayoutWrapper>
            <HomePage />
          </LayoutWrapper>
        </Route>
        <Route path="/about">
          <LayoutWrapper>
            <AboutPage />
          </LayoutWrapper>
        </Route>
        <Route path="/contact">
          <LayoutWrapper>
            <ContactPage />
          </LayoutWrapper>
        </Route>
      </div>
    </LayoutProvider>
  );
};

В этом примере мы создаем компоненты LayoutContextи LayoutProviderдля определения текущего макета на основе маршрута. Компонент LayoutWrapperиспользует контекст макета и применяет соответствующий класс CSS на основе текущего макета.

В этой статье мы рассмотрели различные методы реализации динамических макетов с помощью React Router Dom v6. Используя рендеринг компонентов на основе маршрутов, оболочки компонентов макета и определение макета на основе контекста, мы можем создавать гибкие и повторно используемые макеты для наших приложений React. Поэкспериментируйте с этими методами, чтобы улучшить взаимодействие с пользователем и сделать приложение более динамичным.