React-router 在刷新时未为嵌套页面加载 css

IT技术 css reactjs react-router
2021-05-22 01:54:45

我正在尝试react-router为我的第一个 React webapp设置一个，它似乎正在工作，只是在我刷新页面时没有为我的嵌套页面加载 css。

但是它只适用于一个级别，例如/dashboard但 css 不会加载/components/timer

这是我的index.jsx文件的样子

import './assets/plugins/morris/morris.css';
import './assets/css/bootstrap.min.css';
import './assets/css/core.css';
import './assets/css/components.css';
import './assets/css/icons.css';
import './assets/css/pages.css';
import './assets/css/menu.css';
import './assets/css/responsive.css';

render(
  <Router history={browserHistory}>
    <Route path="/" component={Dashboard}/>
    <Route path="/components/:name" component={WidgetComponent}/>
    <Route path="*" component={Dashboard}/>
  </Router>,
  document.getElementById('root')
);

知道为什么吗？

4个回答

我也有这个问题，我的应用程序没有加载样式表等。但是，我是直接将我的资产导入我的index.html入口点。

通过按照本文档用绝对路径替换链接，我的问题得到了解决。

对我来说，这意味着改变 

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

对此：

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

我不确定同样的事情是否适用于您的导入语句，但值得一试。

仅供参考，我正在使用create-react-app.

找到了！

添加 HTML 元素：

<base href="/" /> <!-- for local host -->

到您的索引页面为您的 URL 设置一个基本案例，以便其他所有内容都将随之而来。

我加了 

<base href="/" /> <!-- for local host -->

到我的 index.html 头

它已解决。

在简单的解决方案是在这里（需要改变的index.html只）

只需%PUBLIC_URL%在每个 CSS 或 JS 文件之前使用。

您可以检查的一个例子%PUBLIC_URL%中index.html的文件，如果您通过创建应用程序的reactcreate-react-app。

<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

一件事是必须的：你的 CSS 文件和 js 文件应该在一个公共目录下。

其它你可能感兴趣的问题
上一篇如何打印可食用的食物？ 下一篇什么是打印机控制台/终端？