假設您有以下組件“template1”，它是您想要的所有 id 的模板。但也讓我們假設還有其他幾個這樣的模板以及“家”、“關于我們”等。假設你有這么多的 id，為它們制作單獨的頁面是不可行的。您將如何以可擴展的方式執行此操作？我在腦海中看到的方式類似于 /template1/5Exo4a /template2/5Exo4a 用于跨多個模板的相同 ID 或 /template1/5Exo4a /template1/5A3z4a 用于相同模板但不同 ID。
我正在使用 vite react typescript，目前我的 app.tsx 是這樣設定的。SidePanel 在哪里選擇單個 id 等。那么我需要將該功能加強到 app.tsx 嗎？還是我能夠以某種方式將 ID 傳回？
function App() {
return (
<Router>
<div className="App">
<SidePanel/>
<Routes>
<Route path="/" element={<Home />}/>
<Route path="/template1" element={<template1/>}/>
<Route path="/template2" element={<template2/>}/>
<Route path="/template3" element={<template3/>}/>
<Route path="/template4" element={<template4/>}/>
<Route path="/template5" element={<template5/>}/>
</Routes>
<SecondaryPanel/>
</div>
</Router>
)
}
uj5u.com熱心網友回復：
您可以執行以下操作（取自底部的教程鏈接）：
export default function App() {
return (
<Router>
<Routes>
<Route
path="/"
element={<Home />}
/>
<Route
path="blog/:id"
element={<Post />}
/>
</Routes>
</Router>
);
}
Post你的template組件在哪里。
在您的template組件內部，您將決議id在 URL 路徑中傳遞的內容。
這個教程看起來不錯
筆記：
- 我已經有一段時間沒有寫這個功能了
- 本教程假定 ReactRouterv6，但似乎有其他版本教程的鏈接
uj5u.com熱心網友回復：
您可以為專案中的所有頁面創建一個 JS 檔案 - routes. 將所有頁面組件匯入到同一個檔案中。創建一個物件陣列，因此每個物件都代表自己的渲染器組件。這樣，您可以在同一檔案中的陣列中的所有內容上運行 MAP。
示例代碼：
import Component1 from "./components/Component1.vue";
import Component2 from "./components/Component2.vue";
import Component3 from "./components/Component3.vue";
import Component4 from "./components/Component4.vue";
import Component5 from "./components/Component5.vue";
import Component6 from "./components/Component6.vue";
export default [
{ path: "/component1", component: Component1, name: "component1" },
{ path: "/component2", component: Component2, name: "component2" },
{
path: "/component3",
component: Component3,
name: "component3",
props: (route) => ({ id: route.query.id }),
},
{ path: "/component4", component: Component4, name: "component4" },
{ path: "/component5", component: Component5, name: "component5" },
{ path: "/component6", component: Component6, name: "component6" },
];
現在，您在 APP 檔案中要做的就是匯入檔案并對每個物件執行 MAP。routes
<Router>
<Routes>
{routes.map((route)=>{
return (
<Route path="route.path" element={route.component} />
)
})}
</Routes>
</Router>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/524771.html
標籤：反应打字稿