Ade*_*nde 19 css reactjs react-router
我正在尝试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')
);
知道为什么吗？
son*_*rte 38
我也有这个问题,我的应用程序没有加载样式表等.但是,我将我的资产直接导入我的index.html入口点.
通过根据本文档用绝对路径替换链接,我的问题得到了解决.
对我来说,这意味着改变
<head>
<link rel="stylesheet" href="./style.css" ></link>
</head>
对此:
<head>
<link rel="stylesheet" href="/style.css" ></link>
</head>
我不确定同样的东西是否适用于你的import语句,但值得一试.
仅供参考我正在使用项目布局create-react-app.
Seq*_*ial 14
找到了!
添加HTML元素:
<base href="/" /> <!-- for local host -->
到你的索引页面为你的URL设置一个基本案例,所以其他一切都将遵循套件.
小智 12
我加了
<base href="/" /> <!-- for local host -->
到我的 index.html 头
它已解决。
在简单的解决方案是在这里（需要改变的index.html只）
只需%PUBLIC_URL%在每个 CSS 或 JS 文件之前使用。
您可以检查的一个例子%PUBLIC_URL%中index.html的文件，如果您通过创建应用程序的反应create-react-app。
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
一件事是必须的：你的 CSS 文件和 js 文件应该在一个公共目录下。
如果您使用 create-react-app 工作流，请将资产放在 public 文件夹下并使用特殊变量 PUBLIC_URL。
在 index.html 中使用 %PUBLIC_URL%：
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
在 JS/JSX 文件中使用 process.env.PUBLIC_URL：
render() {
// Note: this is an escape hatch and should be used sparingly!
// Normally we recommend using import for getting asset URLs
// as described in “Adding Images and Fonts” above this section.
return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
}
推荐方法：
通过将 JavaScript 与 src 文件放在一起，从 JavaScript 导入样式表、图像和字体。
import React from 'react';
import logo from './logo.png'; // Tell Webpack this JS file uses this image
console.log(logo); // /logo.84287d09.png
function Header() {
// Import result is the URL of your image
return <img src={logo} alt="Logo" />;
}
export default Header;
| 归档时间： |
|
| 查看次数： |
8236 次 |
| 最近记录： |