为什么当我手动更改我的反应页面上的 url 时它会忽略 .css 文件？

Question

当我手动将 url http://localhost:3000/overview/all 更改为例如 http://localhost:3000/overview/al 它显示页面但 0 css 就像它完全忽略文件, 在我的 index.html 中，我在

中像这样导入它

<link rel="stylesheet" type="text/css" href="css/style.css" media="all">

index.htm 在公用文件夹中

并且它在任何情况下和任何视图中都可以正常工作， 我不知道这是否重要，但在我的 App.js 中，路由器是这样写的

<Routes>
    <Route path="/" element={<Home />}/>
    <Route path="home" element={<Home />} />
    <Route path="overview" element={<Overview />}>
         <Route path=":category" element={<Overview />} />  
    </Route>  
    <Route path="details" element={<Details />} />
          
</Routes>

我试过的一件事是手动将 url 更改为 http://localhost:3000/overview 并且它工作得很好所以当我在最后包含 /something 时它发生了，

当我调用它从另一个组件导航到页面时

const onSubmit = (event) => {
    event.preventDefault();
    navigate(`/overview/${searchValue}`, { replace: true  } );
  };

它与 css 完美配合，url 应该是这样的， 像这样http://localhost:3000/overview/searchValue 其中 searchValue 是用户在搜索字段中输入的内容，并调用了 onSubmit

我注意到没有 ? 从我在 url 参数方面的经验来看，这似乎不是页面功能的问题，页面可以正确读取它们。

Answer 1

您的 CSS 文件加载了相对（相对于当前路径）路径：

 href="css/style.css"

，当将另一个 PATH 附加到 url 时（如

/overview/something/css/style.css

），会导致 css 路径错误..

如果

css/style.css

在您的根网络文件夹中，您需要使用：

 href="/css/style.css"

这样

/css/style.css

将始终从网络根目录加载

/