我已经使用 React 和 React Router 设置了一个项目。总体结构如下：
这是html页面：
<html lang="en">
<head>
<!-- other tags ... -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="root"></div>
</body>
</html>
这是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} />
)
}
我需要注意的是，应用程序的 React 端工作正常。 watch/:id 中的URL 参数是问题。如果我删除它，样式就会应用到网站。我不知道为什么它不起作用。
直觉上我认为该样式会应用于所有 html 页面内容。最后，插入 React 组件的始终是相同的 html，因此它们应该遵循样式。
React 应用程序在技术上是单页应用程序。我怀疑当请求“嵌套页面”时，服务器正确地将根index.html文件提供给浏览器...但是页面正在尝试加载样式表相对于嵌套路径名，即来自
"/watch/someId"。尝试使用绝对路径。