我用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路由器结构：
//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，所以它们应该坚持该样式。
1条答案
按热度按时间tzdcorbm1#
React应用在技术上是单页应用。我怀疑当请求一个“嵌套页面”时，服务器会正确地将根index.html文件提供给浏览器...***但是***页面会尝试加载相对于嵌套路径名的样式表，即从
"/watch/someId"加载。请尝试使用绝对路径。