如何使用 React 中的嵌套路由仅显示来自详细组件的数据？

Question

我在 react 路由器 v6 中使用嵌套路由时遇到了麻烦。

我有一个称为比萨饼的组件，我在其中显示比萨饼列表，然后当我单击一个比萨饼时，我希望显示详细信息。除了比萨详细信息出现在比萨列表所在的同一组件中之外，一切正常。如果没有列表，我会显示比萨饼的详细信息。

小例子代码：

routes.js

import Sidebar from "./components/Layout/sidebar/Sidebar";
import Pizzas from "./screens/Pizzas/pizzasScreen";
import PizzaDetails from "./screens/PizzaDetails/pizzaDetails";

const routes = [
  {
    path: "/",
    element: <Sidebar />,
    children: [
      {
        path: "/pizzas",
        element: <Pizzas/>,
        children: [
          { path: ":id", 
            element: <PizzaDetails /> 
          }
        ],
      },
    ],
  },
];
export default routes;

pizzasScreen.js

import React from "react";
import { Link, Outlet } from "react-router-dom";

const Pizzas = () => {
  return (
    <div>
      <p>Example of pizzas</p>
      <Link to="/pizzas/1">
        <span>Pizza 1</span>
      </Link>
      <Outlet />
    </div>
  );
};
export default Pizzas;

pizzaDetails.js

import React from "react";
import { useParams } from "react-router-dom";

const PizzaDetails = () => {
  const { id } = useParams();

  return (
    <>
      <h2>{`Pizza ${id} details`}</h2>
    </>
  );
};
export default PizzaDetails;

有了所有这些代码，我所拥有的就是显示列表的披萨屏幕，在这种情况下只有一个：

然后当我点击 Pizza 1 时，我有这个：

问题是，我能做什么让 PizzasScreen 组件只呈现：

比萨饼示例

披萨 1

而 PizzaDetails 仅呈现：

披萨 1 详细信息

Answer 1

如果我正确理解您不希望Pizzas 组件成为布局组件并呈现<p>Example of pizzas</p> 元素和链接和路由，然后您可以将<p>Example of pizzas</p> 元素和链接抽象为一个新组件，并将其呈现为"/pizzas" 的索引路由。实际上，您将Outlet 向上移动为布局组件，并将Pizzas 组件向下移动到要呈现到Outlet 的索引路径中，此时路径正好是"/pizzas"。

const routes = [
  {
    path: "/",
    element: <Sidebar />,
    children: [
      {
        path: "/pizzas",
        element: <Outlet />,
        children: [
          {
            index: true,
            element: <Pizzas/>,
          },
          { path: ":id", 
            element: <PizzaDetails /> 
          }
        ],
      },
    ],
  },
];

比萨饼

const Pizzas = () => {
  return (
    <div>
      <p>Example of pizzas</p>
      <Link to="/pizzas/1">
        <span>Pizza 1</span>
      </Link>
    </div>
  );
};