Ich habe ein Projekt mit React und React Router eingerichtet. Die Gesamtstruktur ist wie folgt:
Dies ist die HTML-Seite:
<html lang="en">
<head>
<!-- other tags ... -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="root"></div>
</body>
</html>
Dies ist die React Router-Struktur:
//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} />
)
}
Ich sollte beachten, dass die React-Seite der App einwandfrei funktioniert. Die watch/:idURL-Parameter in sind Probleme . Wenn ich es entferne, werden die Stile auf die Site angewendet. Ich weiß nicht, warum es nicht funktioniert.
Intuitiv denke ich, dass dieser Stil auf alle HTML-Seiteninhalte angewendet wird. Schließlich wird immer derselbe HTML-Code in React-Komponenten eingefügt, daher sollten sie dem Stil folgen.
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
React 应用程序在技术上是单页应用程序。我怀疑当请求“嵌套页面”时，服务器正确地将根index.html文件提供给浏览器...但是页面正在尝试加载样式表相对于嵌套路径名，即来自
"/watch/someId"。尝试使用绝对路径。