我在 react router v6 中使用嵌套路由時遇到了麻煩。
我有一個名為pizza 的組件，我在其中顯示一個比薩串列，然后當我單擊一個比薩時，我希望顯示詳細資訊。除了比薩詳細資訊出現在比薩串列所在的同一組件中之外，一切正常。我在沒有串列的情況下顯示比薩詳細資訊。
小示例代碼：
路由.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;
比薩螢屏.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;
比薩詳細資訊.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 時，我有這個：
問題是，我該怎么做才能使比薩螢屏組件僅呈現：
比薩餅的例子
比薩 1
和pizzaDetails 只呈現：
比薩 1 詳情
uj5u.com熱心網友回復：
如果我正確理解您不希望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>
);
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/397917.html
上一篇：谷歌云部署容器虛擬機“命令”選項