我有一個頁面，<url>/machines其中列出了網路上一組機器的 IP 地址。我希望能夠單擊串列中的一個并鏈接到一個頁面<url>/machines/<machineid>以呈現一個新頁面，該頁面顯示有關該特定機器的資訊。我希望將 URL 中指定的值<machineid>作為可用值傳遞到呈現的頁面中，例如在 prop/param 等中。
我在配置反應路由器來實作這一點時遇到了麻煩，我想知道是否有人能看到我做錯了什么？我一直在關注 React Router V6 檔案，但似乎無法讓它作業。當我在 處呈現頁面時<url>/machines/hello，我收到控制臺錯誤訊息No routes matched location "/machines/hello"。誰能看到我做錯了什么？
我最初以為我只是渲染一個新頁面（使用不同的組件）來渲染機器資訊頁面，但是查看 React Router V6 檔案，似乎該<MachineInfo>組件現在被渲染為<Machines>?
我alert()在<MachineInfo>組件中有一個似乎根本沒有運行的組件。我沒有得到任何警報。
應用程式.js
function App() {
const value = useContext(Context);
return (
<div className="App">
<Routes>
<Route path="/" element={<Dashboard />} />
<Route path="machines" element={<Machines />}>
<Route path="machines/:id" element={<MachineInfo />} /> // I've tried this using just path=":id" as well with no luck
</Route>
<Route path="topology" element={<Topology />} />
<Route path="settings" element={<Settings />} />
</Routes>
</div>
);
}
機器資訊.js
export default function MachineInfo(props) {
const [state, dispatch] = useContext(Context);
let { id } = useParams<"id">([]);
alert("info: " id)
return (
<p>hello</p>
);
}
uj5u.com熱心網友回復：
首先，您需要一個Layout組件Outlet
export function Layout() {
return (
<>
<Outlet />
</>
);
現在將你的其他路由包裝在這個Layout組件中，你會注意到你現在可以通過說組件是索引來訪問你的嵌套路由，所以/machines/1
應該匹配這個路由。Dashboard/
function App() {
// Not sure why you have value since it doesn't seem to be getting used
const value = useContext(Context);
return (
<div className="App">
<Routes>
<Route path="/*" element={<Layout />}>
<Route index element={<Dashboard />} />
<Route path="machines" element={<Machines />}>
<Route path=":id" element={<MachineInfo />} />
</Route>
<Route path="topology" element={<Topology />} />
<Route path="settings" element={<Settings />} />
</Route>
</Routes>
</div>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/468496.html
標籤：javascript 反应 网址 通配符