J'ai mis en place un projet en utilisant React et React Router. La structure globale est la suivante :
Voici la page html :
<html lang="en">
<head>
<!-- other tags ... -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="root"></div>
</body>
</html>
Voici la Structure du React Router :
//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} />
)
}
Je dois noter que le côté React de l'application fonctionne bien. Les watch/:idparamètres d'URL dans sont des problèmes . Si je le supprime, les styles sont appliqués au site. Je ne sais pas pourquoi ça ne marche pas.
Intuitivement, je pense que ce style sera appliqué à tout le contenu des pages HTML. Enfin, c'est toujours le même code HTML inséré dans les composants React, ils doivent donc suivre le style.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Les applications React sont techniquement des applications d'une seule page. Je soupçonne que lorsqu'une "page imbriquée" est demandée, le serveur sert correctement le fichier racine index.html au navigateur... mais la page essaie de charger la feuille de style relative au nom de chemin imbriqué, c'est-à-dire à partir de
"/watch/someId".Essayez d'utiliser des chemins absolus.