recherche

Maison  >  Questions et réponses  >  le corps du texte

React Router : la feuille de style ne fonctionne pas pour les routes avec des paramètres d'URL dynamiques

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.

P粉618358260P粉618358260252 Il y a quelques jours293

répondre à tous(1)je répondrai

  • P粉254077747

    P粉2540777472024-03-22 14:16:37

    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.

    répondre
    0
  • Annulerrépondre