Import JSX dalam halaman React untuk membuat bar navigasi
Sunting 1: Soalan asal: Bagaimana untuk membuat aplikasi satu halaman menggunakan React
Memandangkan soalan itu tidak cukup spesifik dan telah dijawab sebelum ini, anda perlu belajar React-routing daripada jawapan Imran Rafiq Rather
Sunting 2: Tulis semula soalan dan buka semula untuk kes penggunaan yang lebih khusus.
Saya mengikuti tutorial untuk mengetahui cara menghalakan halaman menggunakan React-route. Setakat ini, saya faham bahawa saya perlu menambah teg <Route> dalam fungsi createRoutesFromElements bagi komponen createBrowserRouter() Kodnya adalah seperti berikut:
const router = createBrowserRouter(
createRoutesFromElements(
<Route path="/" element={<RootLayout/>}>
<Route index element={<Home/>}/>
</Route>
))
Dalam setiap "elemen=", halaman yang dibuat secara modular diimport. Kandungannya adalah seperti berikut:
RootLayout.js daripada tutorial
export default function RootLayout(){
return(
<div className='root-layout'>
<header>
<nav>
<h1> Jobarouter </h1>
<NavLink to="/"> Home </NavLink>
<NavLink to="about"> About </NavLink>
<NavLink to="help"> Help </NavLink>
<NavLink to="careers"> Login </NavLink>
</nav>
</header>
<main>
<Outlet/>
</main>
</div>
)
}
Jika saya mempunyai komponen lama yang dicipta oleh JSX React Bootstrap, kodnya adalah seperti berikut:
NavbarLayout.js
const NavbarComp = () => {
//navbar content
}
export default NavbarComp;
Maka laluannya akan menjadi seperti ini:
<header>
<NavbarComp/>
</header>
Mengapa komponen tidak muncul di halaman saya tanpa sebarang ralat?
