搜尋

首頁  >  問答  >  主體

React Router:樣式表不適用於具有動態 URL 參數的路由

我已經使用 ReactReact 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,因此它們應該遵循樣式。

P粉618358260P粉618358260357 天前377

全部回覆(1)我來回復

  • P粉254077747

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

    React 應用程式在技術上是單頁應用程式。我懷疑當請求“嵌套頁面”時,伺服器正確地將根index.html檔案提供給瀏覽器...但是頁面正在嘗試載入樣式表相對於嵌套路徑名,即來自"/watch/someId"

    嘗試使用絕對路徑。

    回覆
    0
  • 取消回覆