刚开始的代码是这样的，使用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. 织梦DEDE系统跨站跨数据库调用数据显示

    调用方法 本标签的调用格式为: {dede:sql sql="一条完整的SQL语句" appname="数据库配置参数"}您的底层模板{/dede:sql} 稍 ...

  2. uCos-III移植到STM32F10x

    最近在百度上看了uCOS-III 的介绍后,诸多功能有很大的提升和改进,感觉有必要升级一下开发环境.百度介绍:http://baike.baidu.com/view/8531313.htm 环境: S ...

  3. 浅谈JAVA中如何利用socket进行网络编程（二）

    转自:http://developer.51cto.com/art/201106/268386.htm Socket是网络上运行的两个程序间双向通讯的一端,它既可以接受请求,也可以发送请求,利用它可以 ...

  4. Spring IOC 一——容器装配Bean的简单使用

    下文:SpringIOC 二-- 容器 和 Bean的深入理解 写在前面 这篇文章去年写的,缘起于去年某段时间被领导临时"抓壮丁"般的叫过去做java开发,然后在网上找了一个 Sp ...

  5. ios http2客户端访问nginx失败bug

    我们将项目迁入腾讯云后,外网访问流量转发如下外网--->大禹BGP(BGPAntiDDoS)高防---->lbc(LoadBalance cluster)---->lb-----&g ...

  6. bzoj 2151: 种树【贪心+堆】

    和数据备份差不多 设二元组(i,a[i]),开一个大根堆把二元组塞进去,以len排序,每次取出一个二元组 因为单纯的贪心是不行的,所以设计一个"反悔"操作. 记录二元组的前驱pr后 ...

  7. bzoj 1625: [Usaco2007 Dec]宝石手镯【背包】

    裸的01背包 #include<iostream> #include<cstdio> using namespace std; int c,n,w,v,f[20001]; in ...

  8. bzoj 2111: [ZJOI2010]Perm 排列计数【树形dp+lucas】

    是我想复杂了 首先发现大于关系构成了一棵二叉树的结构,于是树形dp 设f[i]为i点的方案数,si[i]为i点的子树大小,递推式是\( f[i]=f[i*2]*f[i*2+1]*C_{si[i]-1} ...

  9. 使用Quartz实现定时作业

    该文章是系列文章 基于.NetCore和ABP框架如何让Windows服务执行Quartz定时作业 的其中一篇. Quartz是一个开源的作业调度框架,准确的称谓应该是 Quartz.Net,它是Ja ...

  10. 51nod 1024 矩阵中不重复的元素

    1024 矩阵中不重复的元素  题目来源: Project Euler 基准时间限制:1 秒 空间限制:131072 KB 分值: 10 难度:2级算法题  收藏  关注 一个m*n的矩阵. 该矩阵的 ...