初学react,发现在写二级路由的时候有个问题,刷新后样式取不到了
比如:路由
<Route path='/home/index' component={Home} />
可以发现这里是一个二级路由----也就是说url上面会追加home/index
(这里和vue的稍微不一样哈)
public里面我们这样引入css
<link rel='./css/boot.css' />
这里就有坑了 因为你引入的是本路径下的css–而react是会在你开的端口下去找public里面的文件。比如你开的端口是localhost:3000
所以你初次加载因为没有点击路由跳转–所以你的项目运行在localhost:3000
,而css文件加载是对的也就是localhost:3000/css/boot.css
,
现在点击了路由后,url变成了localhost:3000/home/index
,我们知道react和vue都是单页spa应用,路由的跳转只是匹配组件不会去刷新界面–这时你请求好的css不会改变,也就没错误,正常加载。
但是你这时手动刷新后,由于url变成了二级路由模式这时的css加载会变成localhost:3000/home/css/boot.css
,而public文件下是没有home文件的,查找不到?
此时react查找不到文件,会默认返回文件同级目录的index文件也就是public下的index.html
。查找失败!
上解决方案:3种–两种是改变引入css的方式
<link rel='/css/boot.css' />
<link rel='%PUBLIC_URL%/css/boot.css' />//这种publicurl只能在react里这样用
另外一种是改变react-route-dom的引入方法–使用hash的一种方案。
一般我们是用BrowserRouter
,现在改用HashRouter
,不建议用。