حدود التوجيه والتنقل

import { useEffect, useState } from "react";
export default function App() { const [hash, setHash] = useState(() => window.location.hash); useEffect(() => { const update = () => setHash(window.location.hash); window.addEventListener("hashchange", update); return () => window.removeEventListener("hashchange", update); }, []); return <main><nav aria-label="Local demonstration"><a href="#intro">Introduction</a> <a href="#practice">Practice</a></nav><h1>{hash === "#practice" ? "Practice" : "Introduction"}</h1><p>Limited hash demonstration, not a complete router.</p></main>; }

Following Practice changes the heading to Practice.

يقود الرابط الأصلي اشتراكا منظفا ويعرض حالتين محليتين فقط.

const records = { a: "Alpha workshop", b: "Beta workshop" };
function RecordScreen({ id }) { const title = records[id]; return title ? <article><h2>{title}</h2><p>Known local record.</p></article> : <p>Record not found</p>; }
export default function App() { return <main><h1>Route adapter boundary</h1><RecordScreen id="b" /></main>; }

Route adapter boundary
Beta workshop
Known local record.

يستهلك العرض معرفا مستقلا عن النقل وللمجهول نتيجة غياب.