Как создать адаптивное главное подробное приложение с помощью React Router?

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

Я бы изучил useMatches, чтобы узнать, можно ли использовать его для определения того, был ли родительский компонент отображен на /parent или /parent/child. С помощью этой информации вы можете условно визуализировать элементы навигации:

• Если включен /parent, всегда отображать навигацию.
• Если в /parent/child экран маленький, не отображайте навигацию.
• Всегда отображать Outlet

При меньших размерах представления, где Outlet не отображается, у вложенных Route компонентов больше нет места для отображения element содержимого. Если я правильно понимаю ваше сообщение, вы хотите использовать RootLayout и Outlet в больших размерах просмотра, не «мобильных», а в размерах просмотра для мобильных устройств отображать RootLayout как родственный маршрут вместо родительского маршрута, чтобы все остальные маршруты были доступны.

Пример рефакторинга:

• Создайте два корневых макета: мобильный и немобильный.

  function RootLayout() {
    return (
      <div
        style = {{
          display: "flex",
          justifyContent: "space-around",
          alignItems: "flex-start"
        }}
      >
        <MasterList />
        <div>
          <h3>Detail</h3>
          <Outlet />
        </div>
      </div>
    );
  }
  

  function MobileLayout() {
    return (
      <div
        style = {{
          display: "flex",
          justifyContent: "space-around",
          alignItems: "flex-start"
        }}
      >
        <div>
          <h3>Detail</h3>
          <Outlet />
        </div>
      </div>
    );
  }
  

• Обновите App, чтобы использовать хук медиа-запроса и условно отображать тот или иной корневой макет, а также условно отображать MasterList как индексный маршрут на экранах меньшего размера.

  export default function App() {
    const isSmallScreen = useMediaQuery("(max-width: 768px)");
  
    const router = React.useMemo(
      () =>
        createBrowserRouter(
          createRoutesFromElements(
            <Route
              path = "/"
              element = {isSmallScreen ? <MobileLayout /> : <RootLayout />}
            >
              {isSmallScreen && <Route index element = {<MasterList />} />}
              <Route path = "page1" element = {<Page1 />} />
              <Route path = "page2" element = {<Page2 />} />
              <Route path = "page3" element = {<Page3 />} />
              <Route path = "*" element = {<Page4 />} />
            </Route>
          )
        ),
      [isSmallScreen]
    );
  
    return <RouterProvider router = {router} />;
  }
  

Альтернатива

Альтернативой может быть использование хука useMatch, чтобы проверить, является ли корень "/" текущим совпадающим маршрутом, и отрендерить MasterList. Логика немного более запутанная и немного менее СУХАЯ. Суть здесь в том, чтобы отображать обычные MasterList и Outlet для больших размеров представления, а в мобильных представлениях условно отображать MasterList, только если на домашней странице, в противном случае визуализируйте Outlet для вложенных маршрутов.

Пример:

import { Outlet, useMatch } from 'react-router-dom';
...

function RootLayout() {
  const isSmallScreen = useMediaQuery("(max-width: 768px)");
  const isHome = useMatch("/");

  return (
    <div
      style = {{
        display: "flex",
        justifyContent: "space-around",
        alignItems: "flex-start"
      }}
    >
      {isSmallScreen ? (
        isHome ? (
          <MasterList />
        ) : (
          <div>
            <h3>Detail</h3>
            <Outlet />
          </div>
        )
      ) : (
        <>
          <MasterList />
          <div>
            <h3>Detail</h3>
            <Outlet />
          </div>
        </>
      )}
    </div>
  );
}

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path = "/" element = {<RootLayout />}>
      <Route path = "page1" element = {<Page1 />} />
      <Route path = "page2" element = {<Page2 />} />
      <Route path = "page3" element = {<Page3 />} />
      <Route path = "*" element = {<Page4 />} />
    </Route>
  )
);

export default function App() {
  return <RouterProvider router = {router} />;
}