React Router：样式表不适用于具有动态 URL 参数的路由-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

React Router：样式表不适用于具有动态 URL 参数的路由

P粉618358260 2024-03-21 20:02:05

[CSS3讨论组]

635

我已经使用 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，因此它们应该遵循样式。