[JavaScript知识库]开发当中解决路由切换bootStrap的样式丢失的问题

  <link rel="stylesheet" href="%PUBLIC_URL%/css/bootStrap.css">

    <!-- 一级路由解决样式丢失问题,当我们在React写一级路由的时候如果地址path不是/about而是/flyShark/about这种的
    不是如下👇
      <NavLink to="/about" activeClassName="active">About</NavLink>
    <Route path="/about" component={About}></Route>
    而是如下👇
    <NavLink to="/flyShark/about" activeClassName="active">About</NavLink>
    <Route path="/flyShark/about" component={About}></Route>
    这种配置方法,那么当用户点击切换路由后刷新了页面就会丢失css/bootStrap.css文件的引用,React当中如果请求丢失就会默认帮你请求public目录下的inde.html文件返回呈现页面也就是说请求样式失败,然后请求反回了public目录下的index.html代码所以产生bug.
    我们的解决方案就是引入public目录下的bootStrap.css
    不写相对路径<link rel="stylesheet" href="./css/bootStrap.css">
    而是写<link rel="stylesheet" href="%PUBLIC_URL%/css/bootStrap.css">这种写法其中的%PUBLIC_URL%就表示public目录,<link rel="stylesheet" href="/css/bootStrap.css">也可以,因为index.html是在public目录下的而/就表示和index.html文件同级的目录。
    还有一种解决方案就是使用hash路由,如果使用hash路由就会在服务器地址http://localhost:3000,会在服务器地址后面加上一个#,浏览器会认为#左边就是服务器地址,就算且换路由地址变成了http://localhost:3000/#/flyShark/about,刷新页面浏览器也不会认为http://localhost:3000/#/flyShark是服务器地址,因为浏览器默认把地址#左边的认为是服务器。
    -->
    <!-- 
      解释出现这种bug的原理:
      第一次进入页面的时候请求bootStrap样式文件的地址是→是正确的http://localhost:3000/css/bootStrap.css
      当你切换路由的时候,因为我们的路由的path:/flyShark/about,所以当你切换完路由之后你的url地址栏上的地址就是http://localhost:3000/flyShark/about了,然后我们刷新页面你会发现请求bootStrap的css文件的请求地址变成了http://localhost:3000/flyShark/css/bootStrap.css而这个地址是无法请求bootStrap的css文件的,【解释产生这个现象原因:一开始浏览器认为http://localhost:3000是服务器地址而刷新后浏览器认为http://localhost:3000/flyShark是服务器的地址】 请求失败所以React脚手架帮你请求了public目录下的inde.html文件代码,所以产生了bug。
      为什么会出现这种情况？
      因为当你刷新页面的时候浏览器认为http://localhost:3000/flyShark是你的根目录地址而实际上http://localhost:3000才是你的根目录地址,所以我们解决的方案就是写%PUBLIC_URL%/css/bootStrap.css路径告诉浏览器要去请求根目录下的bootStrap.css文件。
     -->