刚开始的代码是这样的，使用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. bzoj2823: [AHOI2012]信号塔&&1336: [Balkan2002]Alien最小圆覆盖&&1337: 最小圆覆盖

    首先我写了个凸包就溜了 这是最小圆覆盖问题,今晚学了一下 先随机化点,一个个加入 假设当前圆心为o,半径为r,加入的点为i 若i不在圆里面,令圆心为i,半径为0 再重新从1~i-1不停找j不在圆里面, ...

  2. USACO44 TimeTravel 时间旅行（链表）

    第一眼看到这题,woc,这不是主席树!?旁边HZ也表示同意,然后cGh队长就慢悠悠的过来:“想什么,USACO会有主席树!?” ↓打脸不解释,大家可以去%ta的博客(这样ta就不会D飞我了~)http ...

  3. UVA11383 Golden Tiger Claw —— KM算法

    题目链接:https://vjudge.net/problem/UVA-11383 题解: 根据KM()算法,标杆满足:l(x) + l(y) >= w(x, y) . 当求完最大权匹配之后,所 ...

  4. mac toad下建表问题

    mac toad下创建表,表名会自动多一个双引号,如:tb_test => "tb_test",这个应该是mac系统智能引号问题导致的,目前还没找到解决办法,只能手动用sql ...

  5. MSTAR MIPS DUMP查找方法

  6. bzoj 3784: 树上的路径【点分治+st表+堆】

    参考:https://www.cnblogs.com/CQzhangyu/p/7071477.html 神奇的点分治序(或者叫点剖?).就是把点分治扫过的点依次放进队列里,然后发现,对于每一棵树摊到序 ...

  7. C#后台调用Http外网接口（GET, POST）

    1.get方法调用接口获取json文件内容         public void GetFunction()        {            string serviceAddress =  ...

  8. 正睿多校联盟训练Week6

    并没有参加 Problem A.阿瓦分蛋糕输入文件: cake.in输出文件: cake.out时间限制: 1 second空间限制: 512 megabytes阿瓦为了庆祝自己自己成长为了一只可爱的 ...

  9. js判断是否为ie浏览器，精确显示各个ie版本

    function IETester(userAgent){     var UA =  userAgent || navigator.userAgent;     if(/msie/i.test(UA ...

  10. 爬虫—Requests高级用法

    Requests高级用法 1.文件上传 我们知道requests可以模拟提交一些数据.假如有的网站需要上传文件,我们也可以用requests来实现. import requests files = { ...