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?
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Anda cuba memasukkan komponen JS ke dalam fail
index.htmlbiasa.Ini tidak terpakai sama sekali. Dengan perpustakaan seperti ReactJS, kami telah melakukan semua kerja asas melalui perpustakaan
ReactDOM.render(<App/>, document.querySelect('#root')), iaitu JavaScript itu sendiri secara dalaman. Jadi, dalam kes ini, aplikasi halaman tunggal bermakna kita menggunakan satu elemen dengan id='root' dan meletakkan semua kod dalam elemen itu.Jadi ini bukan pendekatan yang betul. Melancarkan aplikasi satu halaman dengan cara ini tidak akan berfungsi, apatah lagi masalah seterusnya.