刚开始的代码是这样的，使用react router4.x写的demo路由跳转后，页面的没有渲染，是因为没有引入外部css文件（或者说引入外部文件路径错误）

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

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

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <meta name="theme-color" content="#000000">

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">

    <title>React App</title>

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

  </head>

  <body>

    <noscript>

      You need to enable JavaScript to run this app.

    </noscript>

    <div id="root"></div>

  </body>

</html>

将上面代码（红色部分）的点去掉就可以了，如下所示

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

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

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <meta name="theme-color" content="#000000">

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">

    <title>React App</title>

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

  </head>

  <body>

    <noscript>

      You need to enable JavaScript to run this app.

    </noscript>

    <div id="root"></div>

  </body>

</html>

react link引入外部css样式的坑的更多相关文章

  1. 久未更 ~ 五之 —— 引入外部CSS样式表 小节

    > > > > > 久未更 系列一:在html中引入外部css样式表 //引入外部css样式表 //<lilnk>要放在<head>标签的第一行, ...

  2. 引入外部CSS的两种方式及区别

    1.CSS的两种引入方式 通过@import指令引入 @import指令是CSS语言的一部分,使用时把这个指令添加到HTML的一个<style>标签中: 要与外部的CSS文件关联起来,得使 ...

  3. Vue style里面使用@import引入外部css, 作用域是全局的解决方案

    问题描述 使用@import引入外部css,作用域却是全局的 <template> </template> <script> export default { na ...

  4. vue引入外部.css文件，webpack将其与.vue中的样式混合打包了，怎么办？

    我使用vue-cli搭自己的博客,希望引入公共样式: // main.js import './assets/styles/common.css' 我本来是希望webpack打包后,能将这个样式独立打 ...

  5. 网站引入了css样式文件能访问，就是没有效果

    今天后端的同事遇到这么个问题,引入了外部css文件也能访问,就是页面上没有效果. 大概是下面这个样子: css引入如下: 我非常的纳闷,说真的我还没遇到过这种情况,UI是可以运行的,一点事都没有... ...

  6. react如何引入外部文件的整理

    1 引入组件 首先就应该是安装了,安装在环境中后通过 import { Select, Button, Icon, QueueAnim } from 'antd'; 就可以把需要的组件引用进来了~ 2 ...

  7. IOS UIWebView引用外部CSS样式（转载）

    首先,将要引用的CSS样式导入到工程文件,然后我们可以自己拼装一个网页并引用这个样式,具体代码实现如下: -(void)viewDidLoad { [super viewDidLoad]; NSStr ...

  8. wap开发使用jquery mobile之后页面不加载外部css样式文件/js文件

    场景: wap开发,使用jquery mobile之后不会加载外部自定义的css文件了,需要手动刷新才会加载,查看外部自定义的js文件也是一样. 解决办法: 1.在page下面添加css样式,就不要写 ...

  9. 通过node.js读取html页面及其页面中引入的css样式

    Node 是什么? Node 是一个基于Chrome V8 引擎的JavaScript 运行环境. Node 不是一种独立的语言.Node不是 JavaScript 框架, Node是一个除了浏览器之 ...

随机推荐

  1. problem in Sourcetree

    1.The date is commit date not the date of author 2.The log line is ordered  by time, actually it sho ...

  2. I.MX6 Android shutdown shell command

    /******************************************************************************* * I.MX6 Android shu ...

  3. Linux设备模型 (3)

    在上文中,我们介绍到如何使用default attribute.Default attribute使用很方便,但不够灵活.比如上篇文章在Kobject一节中提到的那个例子,name和val这两个att ...

  4. 《StackGAN: Text to Photo-realistic Image Synthesis with Stacked GAN》论文笔记

    出处:arxiv 2016 尚未出版 Motivation 根据文字描述来合成相片级真实感的图片是一项极具挑战性的任务.现有的生成手段,往往只能合成大体的目标,而丢失了生动的细节信息.StackGAN ...

  5. 转载：百为STM32开发板教程之十一——NOR FLASH

    转载:http://bbs.21ic.com/icview-586199-1-1.html 百为STM32开发板教程之十一——NOR FLASH 参考文档:百为stm32开发板光盘\st官方参考资料\ ...

  6. Swift4 协议

    创建: 2018/02/27 完成: 2018/02/28 更新: 2018/03/07 增加类采用协议时的注意 补充只有类, 结构体, 枚举型可以采用协议 增加为类定义准备的协议( protocol ...

  7. idea简单使用

    注意 错误: 找不到或无法加载主类 main.scala03.WordCountDemo 上面解决方法:

  8. Linux 常用命令十一 ps

    一.ps命令 Linux中的ps命令是Process Status的缩写. ps命令用来列出系统中当前运行的那些进程.ps命令列出的是当前那些进程的快照,就是执行ps命令的那个时刻的那些进程,如果想要 ...

  9. 原生js一行代码实现简易轮播图

    这是一个简易的js无限循环轮播图,只用了一行js代码就实现了无限循环,记录一下三目运算符的伟大! <!DOCTYPE html><html lang="en"&g ...

  10. Elementui实战知识点随记

    1. Elementui实战知识点随记 1.1. 表单验证 对于复杂数据,类似于对象里面包含数组,每个数组又包含多个对象,表单验证我查看了网上很多资料都说Elementui不支持,实际上,经过我官网的 ...