React Router v6中如何通过嵌套路由实现详情组件单独展示？

这个问题的核心在于你当前把PizzaDetails设置成了Pizzas的子路由，所以Pizzas组件里的<Outlet />会把详情内容渲染在列表下方。要实现两者分开独立显示，我们只需要调整路由结构，让它们成为共享Sidebar布局的同级路由即可。

步骤1：修改路由配置文件（routes.js） #

将PizzaDetails从Pizzas的children数组中移出，作为Sidebar的直接子路由，这样两个组件就会各自独立渲染：

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/>
      },
      {
        path: "/pizzas/:id",
        element: <PizzaDetails />
      }
    ],
  },
];
export default routes;

步骤2：移除Pizzas组件中的Outlet #

因为现在PizzaDetails不再是Pizzas的子路由了，所以Pizzas组件里的<Outlet />可以删掉，这样列表页面就只会显示列表内容：

import React from "react";
import { Link } from "react-router-dom";
const Pizzas = () => {
  return (
    <div>
      <p>Example of pizzas</p>
      <Link to="/pizzas/1">
        <span>Pizza 1</span>
      </Link>
    </div>
  );
};
export default Pizzas;

关键注意点 #

确保你的Sidebar组件内部包含了<Outlet />，因为父路由的element需要通过<Outlet />来渲染它的子路由内容。如果Sidebar里还没有的话，记得加上：

// Sidebar组件示例
import { Outlet } from 'react-router-dom';

const Sidebar = () => {
  return (
    <div className="sidebar-layout">
      {/* 你的侧边栏内容 */}
      <Outlet /> {/* 这里用来渲染Pizzas或PizzaDetails */}
    </div>
  );
};

这样修改后，访问/pizzas时只会显示披萨列表，点击链接跳转到/pizzas/1时就只会显示对应的详情内容，两者完全独立，不会同时出现在页面上了。

内容的提问来源于stack exchange，提问作者S.Marx