React-记录Bug——因路由导致的样式丢失问题

记录Bug——因路由导致的样式丢失问题

问题展示：

<div className="row"> 
                        <div className="col-xs-2 col-xs-offset-2">
                            <div className="list-group">
                                <MyNavLink to="/gogocj/about">About</MyNavLink>
                                <MyNavLink to="/gogocj/home">Home</MyNavLink>
                            </div>
                        </div> 
                        <div className="col-xs-6">
                        <div className="panel">
                        <div className="panel-body">
                            <Switch>
                                <Route path="/gogocj/about" component={About}/>
                                <Route path="/gogocj/home" component={Home}/>
                            </Switch>
                        </div>
                        </div>
                    </div>

• 假如我们把Home和About组件的路径前面都加了一个/gogocj， 那么只要一刷新页面，就拿不到加载进来的bootstrap样式了

 

原因：

找bootstrap样式，是从 localhost:3000/css/bootstrap.css 拿，这里的localhost:3000其实就是脚手架的public地址，但是假如我们请求的路径下没有我们需要的东西的话，脚手架也会给我们返回一些东西，也就是返回public/index.html

路由访问过程：

一开始我们通过localhost:3000 返回，拿到的是public下的index.html,然后因为我们在index中通过link引入了bootstrap

 

假如我们添加了gogocj的话，只要一刷新，就是从 localhost:3000/gogocj/css/bootstrap.css 获取bootstrap。很显然，没有，那么就是返回public下的index.html文件了

 

原因总结：

样式丢失的原因：混入了路径，一刷新，就找不到对应的样式css文件了

 

解决方法：

1、改变index.html中引入bootstap的路径

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

删去点：<link rel="stylesheet" href="/css/bootstrap.css">

原因：因为加了点的话，就是相对路径，就是从当前文件出发来查找，所以就从localhost:3000/gogocj文件路径出发来找就错了

如果不写点的话，就是直接在 localhost:3000/ 中找

 

2、修改引入link路径（ %PUBLIC_URL% 这是适用于在React中写，其他地方是不认可的）

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

这种就是绝对路径了，更加不可能有问题了，因为 %PUBLIC_URL% 表示的就是 localhost:3000

 

3、不改变link的路径，<link rel="stylesheet" href="./css/bootstrap.css"> 把BrowserRouter改成HashRouter

原因：hash路由中会有一个#，#号后面的东西都代表是前端的东西，是不会像后端请求的

然后一刷新的时候，都是直接忽略#号后面的东西了

也就是：我们在 localhost:3000/#/gogocj/home 刷新页面的时候，会把#省略，直接给localhost:3000/发送请求

 

总结：

总结：前两种都是改变link的路径，第三种是直接修改了路由的模式

 

相关拓展：

• 拓展1：强制刷新

shift + 点击浏览器刷新按钮

• 拓展2：

包管理器不要混着用，不要一下子用yarn 一下子用npm