解决react二级路由刷新后样式丢失问题

初学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,不建议用。