React Router: Stylesheet not working on routes with URL parameters

Issue

I have set up a project with React and React Router. The general structure looks like this:

This is the html page:

<html lang="en">
  <head>
    <!-- other tags ... -->
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

This is the React Router structure:

//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} />
    )
}

I need to note, that the React side of the application works fine. The URL parameter in watch/:id is the problem. If I remove it, the style gets applied to the site. I have no idea why it is not working.

Intuitively I thought that the style would get applied to all of the html pages content. In the end it is always the same html where the React components are inserted, so they should stick to the style.

Solution

React apps are technically Single Page Apps. I suspect when requesting a "nested page" the server is correctly serving up the root index.html file to the browser… BUT the page is trying to load the stylesheet relative to the nested pathname, i.e. from "/watch/someId".

Try to use an absolute path.

<link rel="stylesheet" href="/styles.css">

Answered By – Drew Reese

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published