问题展示:
<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