我已經使用 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"。嘗試使用絕對路徑。