программное обеспечение промежуточного слоя для react-router-dom

Вопрос или проблема

const MyReactComponent = lazy(() =>
  import('./my_react-component.ui').then((module) => ({ default: module.MyReactComponent })),
)

function withSuspense<Props extends object>(
  component: ComponentType<Props>,
  suspenseProps: SuspenseProps & {
    FallbackComponent?: ComponentType
  },
) {
  const Wrapped = forwardRef<ComponentType<Props>, Props>(
    (props: Props, ref: ForwardedRef<ComponentType<Props>>) =>
      createElement(
        Suspense,
        {
          fallback:
            suspenseProps.fallback ||
            (suspenseProps.FallbackComponent &&
              createElement(suspenseProps.FallbackComponent)),
        },
        createElement(component, { ...props, ref }),
      ),
  );

  const name = component.displayName || component.name || 'Unknown';
  Wrapped.displayName = `withSuspense(${name})`;

  return Wrapped;
}

const enhance = compose((component) =>
    withSuspense(component, {
    fallback: (
      <Loader "/>
    ),
  }),
);

export const PageRoute1: RouteObject = {
  path: 'other-path/page',
  element: createElement(enhance(MyReactComponent)),
}

const browserRouter = createBrowserRouter([
  {
    errorElement: <BubbleError />,
    children: [
      {
        element: createElement(enhance(GenericLayout)),
        children: [PageRoute1, PageRoute2],
      },
      {
        element: createElement(enhance(EmptyLayout)),
        children: [page404Route],
      },
      {
        loader: async () => redirect(PATH_KEYS.page404),
        path: '*',
      },
    ],
  }
])

Ответ или решение

Промежуточное ПО для react-router-dom: Сохранение истории перемещения пользователей

Ваша задача — сохранить историю перемещения пользователей по вашему веб-сайту, и для этого вы хотите реализовать собственное промежуточное ПО для react-router-dom. Давайте разберем, как это можно сделать без использования сторонних библиотек, используя функционал React.

Зачем нужно промежуточное ПО?

Промежуточное ПО (middleware) в контексте маршрутизации позволяет обрабатывать данные (например, события навигации) перед тем, как они достигнут компрометирующей конфигурации маршрутов. Таким образом, мы можем отслеживать, где находится пользователь, и сохранять эту информацию для дальнейшего анализа или стабильности приложения.

Реализация промежуточного ПО

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

1. Создайте свой контекст для хранения истории навигации.
2. Используйте хук useLocation из react-router-dom, чтобы отслеживать изменения маршрута.
3. Сохраняйте информацию о маршруте в контексте.

Шаг 1: Создание контекста

import React, { createContext, useContext, useState, useEffect } from 'react';

const NavigationContext = createContext();

export const NavigationProvider = ({ children }) => {
  const [history, setHistory] = useState([]);

  return (
    <NavigationContext.Provider value={{ history, setHistory }}>
      {children}
    </NavigationContext.Provider>
  );
};

export const useNavigationHistory = () => {
  return useContext(NavigationContext);
};

Шаг 2: Использование useLocation

Теперь, когда у нас есть контекст для хранения истории перемещения, создаем компонент-обертку, который будет следить за изменениями маршрута:

import { useLocation } from 'react-router-dom';
import { useNavigationHistory } from './NavigationContext';

const NavigationObserver = () => {
  const location = useLocation();
  const { history, setHistory } = useNavigationHistory();

  useEffect(() => {
    setHistory(prevHistory => [...prevHistory, location.pathname]);
  }, [location, setHistory]);

  return null;
};

Шаг 3: Интеграция с маршрутизатором

Теперь нужно обернуть ваше приложение в созданный контекст и добавить компонент-обозреватель в структуру маршрутов:

const App = () => {
  return (
    <NavigationProvider>
      <BrowserRouter>
        <NavigationObserver />
        {/* Ваши маршруты здесь */}
      </BrowserRouter>
    </NavigationProvider>
  );
};

Плюсы вашего подхода

1. Отсутствие зависимостей. Вы не полагаетесь на сторонние библиотеки.
2. Гибкость. Вы легко можете адаптировать логику, добавляя дополнительную информацию или изменяя способ сохранения истории.
3. Прозрачность. Логика навигации сосредоточена в одном месте, что упрощает её поддержку.

Заключение

Создание промежуточного ПО для отслеживания истории маршрутов в react-router-dom позволяет вам управлять навигацией более эффективно, сохраняя при этом контроль над внутренним состоянием приложения. Вы смогли адаптировать функционал так, как это требуется для вашего проекта, не прибегая к сторонним библиотекам, что является оптимальным решением для поддержания чистоты вашего кода и архитектуры приложения.