css - React Router 似乎会阻止自定义 CSS

Question

我一直在为我的网络应用程序开发 React Bootstrap 导航栏，并且在设计它时遇到了一些挫折。本质上，我试图使用自定义 CSS 和 classNames 为我的导航栏设置自定义背景颜色，但颜色是否显示似乎取决于用户访问的路线。

当我访问任何“主要”路线时，颜色会按预期显示(例如，/、/about 和 /donate 显示为this)。然而，每当我访问任何“辅助”路线时，似乎 CSS 都被完全忽略了(例如 /help/contact 和 /donate/methods 看起来像 this )。在上述所有示例中，基本 URL 均为 localhost:3000。我正在使用 React Router ('react-router-dom') 来处理路由，并使用 React Bootstrap 来创建我的导航栏。

要应用自定义背景颜色，我只需向导航栏对象添加一个 className:

'../components/AppNavBar'

<Navbar variant="light" className=custom-color-1>
  *Navbar contents*
</Navbar>

并在直接链接到index.html的自定义CSS文件中选择此类:

.custom-color-1 {
  background-color: #B3E5FC;
}

这些是我运行的测试，使我得出这个结论:

1. 从“/”或“/ff”访问主页会正常显示导航栏，但通过“/ff/ff”访问同一页面会导致导航栏变成白色。
2. 创建两个几乎相同的简约页面，并将其中一个路由到“/test”，另一个路由到“/test/route”后，前者正常显示，后者变为白色。这两个文件之间的唯一区别是文件名称和导出名称。下面提供了其中之一的示例。

import React from 'react';

import AppNavBar from '../components/AppNavBar';

const TestPage1 = () => {
    return(
        <>
            <AppNavBar />
            Sample text.
        </>
    );
};

export default TestPage1;

此外，使用 Chrome DevTools 时，两个页面之间的 DOM 看起来是相同的。这是最令我困惑的部分。在适当应用样式的页面上，我可以看到我的自定义 className 出现在 DevTools 面板的“样式”选项卡中，并具有适当的 backgroundColor 属性。在其他页面上，它完全消失了!影响此行为的唯一因素似乎是每个页面映射到的路由。这是 React Router 的一个错误，还是我只是忽略了一些东西？

我在某些页面上对文本颜色进行了类似的测试。在导航栏样式正确的页面上，我可以使用 className 和自定义 CSS(使用颜色:#FAFAFA; 属性)。在导航栏样式不正确的页面上，我无法更改文本颜色。因此，这似乎不是 React Bootstrap Navbar 的问题。

编辑:还注意到我的所有自定义样式表开始出现“资源解释为样式表但使用 MIME 类型 text/html 传输”错误。我的 index.html 文件的副本可以在我制作的 sandbox 中找到，它重现了我的问题。

Answer 1

我在这里看到两个问题。

1. 您正在使用相对路径链接到样式表
2. 您没有使用正确的链接组件

有关上述内容的更多详细信息:

1. 您正在使用相对路径 ( ./style.css ) 链接到您的 style.css文件。这适用于顶级路径，因为 style.css 的相对路径是正确的。但在第二级路径上，相对路径不再正确。

   将链接更改为 style.css至

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

2. 您没有使用正确的链接组件，这使得上述问题更加复杂。目前，当单击导航链接时，页面会使用新路线刷新，而不是作为单页面应用程序运行。

   您需要更新 <Nav.Link>组件使用 Link组件，如下所示:

   import { Link } from "react-router-dom";
   
   <Nav.Link as={Link} to="/other/1">
   

   注意 as和to Prop 。这将使<Nav.Link>作为 <Link/> 工作组件和应用程序将作为单页应用程序运行。

此外，自从 <AppNavBar />用于每条路线，您应该考虑将其从各个路线组件中移出，以便在所有路线上使用。