刚开始的代码是这样的，使用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. YTU 2418: C语言习题 矩阵元素变换

    2418: C语言习题 矩阵元素变换 时间限制: 1 Sec  内存限制: 128 MB 提交: 293  解决: 155 题目描述 将一个n×n(2<n<10,n为奇数)的矩阵中最大的元 ...

  2. UICollectionView基础/UICollectionViewCell的四种创建方式

    前言 UICollectionViewCell的四种创建方式:http://blog.csdn.net/ZC_Huang/article/details/52002302 这个控件,看起来与UITab ...

  3. 四:多线程--NSOperation简单介绍

    一.NSOperation简介 1.NSOperation的作⽤:配合使用NSOperation和NSOperationQueue也能实现多线程编程 NSOperation和NSOperationQu ...

  4. thinkphp不能够将ueditor中的html文本显示

    因为这个问题花费了我好长时间,非常的急躁.fuck!! 这次我首先在富文本框中输入了一些文本,这些文本是带有样式的,比如是代码.然后存入数据库,但是当我再一次将它取出来打算放入富文本框中的时候,马丹, ...

  5. 在Visual studio 中解除 TFS 的账号绑定

    在Visual Studio中, 只要使用了TFS, 就会要求输入用户名密码验证 . 但是一旦点击验证对话框下部的:记住用户名密码 以后都不能再修改用户名了. 而且重装Visual Studio 听说 ...

  6. spoj 839 OPTM - Optimal Marks&&bzoj 2400【最小割】

    因为是异或运算,所以考虑对每一位操作.对于所有已知mark的点,mark的当前位为1则连接(s,i,inf),否则连(i,t,inf),然后其他的边按照原图连(u,v,1),(v,u,1),跑最大流求 ...

  7. Word Cloud (词云) - R

    在前面已经陆续总结了如何用 Python 和 JavaScript 创建词云了,今天要说的是 R.其实 SPSS 和 SAS 的 Word Cloud 扩展模板都是基于 R 实现的. >> ...

  8. Luogu P1195/P1892 口袋的天空/BOI团伙 【最小生成树/并查集】By cellur925

    其实这俩题挺水的,团伙拿下了一血,但是感觉还是写一下博客比较好x. 一.团伙 题目描述 1920年的芝加哥,出现了一群强盗.如果两个强盗遇上了,那么他们要么是朋友,要么是敌人.而且有一点是肯定的,就是 ...

  9. Luogu P1541 乌龟棋 【线性dp】

    题目背景 小明过生日的时候,爸爸送给他一副乌龟棋当作礼物. 题目描述 乌龟棋的棋盘是一行 N 个格子,每个格子上一个分数(非负整数).棋盘第1格是唯一的起点,第 N 格是终点,游戏要求玩家控制一个乌龟 ...

  10. SetViewportOrgEx（视口） 与 SetWindowOrgEx（窗口） 解析

    SetViewportOrgEx (hdc,x/2,y/2) 视口中心点设置到窗口中心 获取客户群x和y,x/2,y/2 ,这样中心点就到窗口中间了. SetWindowOrgEx(hdc,-x/2, ...