Saya telah menyediakan projek menggunakan React dan React Router. Struktur keseluruhan adalah seperti berikut:
Ini ialah halaman html:
<html lang="en">
<head>
<!-- other tags ... -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="root"></div>
</body>
</html>
Ini ialah Struktur Penghala Reaksi:
//imports (createBrowserRouter, etc.)
export default function App(props){
const router = createBrowserRouter([
{
path: "/",
element: <Root/>,
children: [
{
path: "watch/:id", //URL param is the problem!
element: <Watch/>,
loader: watchLoader
}
]
}
])
return (
<RouterProvider router={router} />
)
}
Saya harus ambil perhatian bahawa bahagian React pada apl berfungsi dengan baik. Parameter watch/:idURL dalam ialah masalah . Jika saya mengalih keluarnya, gaya digunakan pada tapak. Saya tidak tahu mengapa ia tidak berfungsi.
Secara intuitif saya rasa gaya ini akan digunakan pada semua kandungan halaman html. Akhir sekali, ia sentiasa html yang sama dimasukkan ke dalam komponen React, jadi mereka harus mengikut gaya.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Aplikasi React secara teknikal adalah aplikasi satu halaman secara teknikal. Saya mengesyaki bahawa apabila "halaman bersarang" diminta, pelayan sedang menyampaikan fail index.html akar dengan betul kepada penyemak imbas... tetapi halaman cuba memuatkan lembaran gaya berbanding nama laluan bersarang, iaitu daripada
"/watch/someId".Cuba gunakan laluan mutlak.