React Router 似乎阻止了自定义 CSS答案

【问题标题】：React Router Appears to Block Custom CSSReact Router 似乎阻止了自定义 CSS
【发布时间】：2020-04-29 05:46:27
【问题描述】：

我一直在为我的 Web 应用程序开发一个 React Bootstrap Navbar，并且对它的样式设置有些失望。本质上，我正在尝试使用自定义 CSS 和 classNames 为我的导航栏设置自定义背景颜色，但颜色显示是否似乎取决于用户访问的路线。

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

为了应用自定义背景颜色，我只是在 Navbar 对象中添加了一个 className：

'../components/AppNavBar'

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

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

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

这些是我运行的测试导致我得出这个结论：

从“/”或“/ff”访问主页正常显示导航栏，但通过“/ff/ff”访问同一页面会导致导航栏变白。
创建两个几乎相同的简约页面并将一个路由到“/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（使用color: #FAFAFA; 属性）。在导航栏样式不正确的页面上，我无法更改文本颜色。因此，这似乎不是 React Bootstrap 导航栏的问题。

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

【问题讨论】：

如果可以在 CodesandBox 上做一个简单的代码
完成。这似乎是对行为的建模。所有主要路由都正常工作，并且所有次要路由都无法设置导航栏的样式，无论显示的页面如何codesandbox.io/s/reactroutercss-iwexj
以下任何解决方案是否解决了您的问题@Riley？
我很抱歉没有尽快回复。更新我的样式表的 href 解决了这个问题。谢谢！

标签： css reactjs react-router

【解决方案1】：

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

您正在使用相对路径链接到样式表
您使用的链接组件不正确

以上详情：

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

将style.css的链接改为
```
<link rel="stylesheet" href="/style.css" />
```
您没有使用正确的链接组件，这加剧了上述问题。当前，当单击导航链接时，页面会使用新路由刷新，而不是作为单页应用程序工作。

您需要更新<Nav.Link> 组件以使用Link 组件，如下所示：
```
import { Link } from "react-router-dom";

<Nav.Link as={Link} to="/other/1">
```
注意 as 和 to 属性。这将使<Nav.Link> 作为<Link/> 组件工作，并且该应用程序将作为单页应用程序工作。

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

【讨论】：

嗯，奇怪的是，我以为我之前尝试使用 Link 元素无济于事。我切换到Nav.Link 的主要原因是Link 搞乱了主导航栏中的样式。但是更新 CSS 路径并保持 Nav.Links 现在似乎可以工作。非常感谢！
两个不同的东西 - Nav.Link 是一个 Material UI 组件，用于显示导航链接，Link 是一个 react-router-dom 组件，负责路由到新视图。
在部署应用程序时使用Nav.Link 代替Link 会导致问题吗？
视情况而定，如果您希望您的应用程序作为 SPA 工作，您希望使用 Link 或 Nav.Link 作为 Link。

【解决方案2】：

因为您使用的是 react-bootstrap 的 Nav.Link 而不是 react-router 的 {Link} 组件 Nav.Link 不是路由器

首先在AppNavBar.js 中导入这个

import { Link } from 'react-router-dom';

然后更改此行：

  <Nav.Link href="/other">Second page using route /other</Nav.Link>

  <Nav.Link href="/other/1">Second page using route /other/1</Nav.Link>

与：

  <Link to="/other">Second page using route /other</Link>

  <Link to="/other/1">Second page using route /other/1</Link>

更改：HERE

【讨论】：