Início / coding / Perguntas / 78372543
Accepted
Alexander Farber
Asked: 2024-04-23 20:57:15 +0800 CST

Como criar um aplicativo mestre detalhado responsivo usando React Router?

  • 772

Preparei um caso de teste simples no Github para minha pergunta:

captura de tela animada

Em RouterLayout.jsx, uma consulta de mídia faz Outletdesaparecer em telas estreitas, como você pode ver na captura de tela animada, onde arrasto a lateral do navegador para torná-la menor:

RootLayout.jsx

import { Outlet } from "react-router";
import { useMediaQuery } from "@react-hook/media-query";
import MasterList from "../components/MasterList";

export default function RootLayout() {
  const isSmallScreen = useMediaQuery("(max-width: 768px)");

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

Minha pergunta, por favor:

Em telas pequenas de celulares apenas a Lista Mestre deve ser exibida. E quando um Link for clicado ali, uma Página1 ou outras páginas deverão ser exibidas, com possibilidade de retornar à Lista Mestre. Isso ainda não funciona.

Em telas grandes de tablets e computadores, a Lista mestre e a Página1 ou outras são exibidas próximas uma da outra. Isso já funciona no meu código.

Devo adicionar algum atributo ao Links no MasterList.jsx abaixo?

MasterList.jsx

import { Link } from "react-router-dom";

const MasterList = () => {
  const pages = [
    { id: 1, title: "Page 1" },
    { id: 2, title: "Page 2" },
    { id: 3, title: "Page 3" },
    { id: 4, title: "Page 4" },
  ];

  return (
    <div>
      <h2>Master List</h2>
      <nav>
        <ul>
          {pages.map((page) => (
            <li key={page.id}>
              <Link to={"/page" + page.id}>{page.title}</Link>
            </li>
          ))}
        </ul>
      </nav>
    </div>
  );
};

export default MasterList;

Aplicativo.jsx

import {
  Route,
  RouterProvider,
  createBrowserRouter,
  createRoutesFromElements,
} from "react-router-dom";
import Page1 from "./pages/Page1";
import Page2 from "./pages/Page2";
import Page3 from "./pages/Page3";
import Page4 from "./pages/Page4";
import RootLayout from "./layouts/RootLayout";

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>
  )
);

const App = () => {
  return <RouterProvider router={router} />;
};

export default App;
reactjs

2 respostas

  1. Best Answer

    Em tamanhos de visualização menores, onde Outletnão são renderizados, os Routecomponentes aninhados não têm mais um local para renderizar seu elementconteúdo. Se entendi sua postagem corretamente, você deseja usar RootLayoutos Outlettamanhos de visualização maiores, não "móveis", e os tamanhos de visualização móveis, renderizados RootLayoutcomo uma rota irmã em vez de uma rota pai, para que todas as outras rotas sejam acessíveis.

    Exemplo de refatoração:

    • Crie dois layouts raiz, móvel e não móvel.

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

    • Atualize Apppara usar o gancho de consulta de mídia e renderizar condicionalmente um layout raiz ou outro, e renderizar condicionalmente MasterListcomo uma rota de índice em telas menores.

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

    Alternativa

    Uma alternativa pode ser utilizar o useMatchgancho para testar se a raiz "/"é a rota e renderização atualmente correspondida MasterList. A lógica é um pouco mais complicada e um pouco menos DRY . A essência aqui é renderizar os tamanhos de visualização normais MasterListe Outletmaiores, e nas visualizações móveis renderizar condicionalmente MasterListapenas se estiver na página inicial, caso contrário, renderizar Outletpara as rotas aninhadas.

    Exemplo:

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

  2. Não sei qual é a melhor abordagem para conseguir isso, mas é necessário incorporar o fato de que o Outlet renderiza rotas filhas no componente pai.

    Eu exploraria useMatches para ver se você pode usá-lo para determinar se o componente Parent foi renderizado em /parentou /parent/child. Com essas informações, você poderia renderizar condicionalmente os elementos de navegação:

    • Se estiver em /parent, sempre renderiza a navegação
    • Se estiver em /parent/child e a tela for pequena, não renderize a navegação
    • Sempre renderize Outlet
    • 1

relate perguntas