Reactjs 如何使用React Router创建响应式主详细信息应用程序

在未渲染Outlet的较小视图尺寸上，嵌套的Route组件不再有地方渲染其element内容.如果我正确理解您的帖子，您希望在较大的非"移动"视图大小上使用RootLayout和Outlet，并在移动视图大小上将RootLayout渲染为sibling 路由而不是父路由，因此所有其他路由都是可访问的.

重构示例:

• 创建两种根布局，移动和非移动.

  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} />;
  }
  

替代

另一种 Select 可能是利用useMatch挂钩来测试根"/"是否是当前匹配的路由和渲染MasterList.逻辑有点复杂，也有点少107.这里的要点是在更大的视图大小上渲染普通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} />;
}