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

Question

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

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

要应用自定义背景颜色，我只需向 Navbar 对象添加一个类名:

'../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 看起来是相同的。这是最让我困惑的部分。在适当应用样式的页面上，我可以看到我的自定义类名出现在 DevTools 面板的“样式”选项卡中，并具有适当的 backgroundColor 属性。在其他页面上，它完全消失了!似乎影响此行为的唯一因素是每个页面映射到的路由。这是 React Router 的错误，还是我只是忽略了什么？

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

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

Answer 1

我在这里看到了 2 个问题。

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 />用于每条路线，您应该考虑将其从各个路线组件中移出，以便在所有 route 使用。