082_尚硅谷_react教程_解决样式丢失问题

好了，各位说完了Switch的使用呢，也给大家形成笔记了，就两句话，通常情况下。Pass路径和component呢是一一对应关系，正是因为他们一般情况下都是一一对应的，所以说呢，应该用Switch包裹一下，提高效率，进行单一匹配，对吧？好了，那固定的套路脚手架再停掉，把src呢，CTRLCCTRLV再复制一份，这回呢就叫做11_src下划线叫做Switch的使用，好嘞啊，那把这个笔记关掉，我们重新启动脚手架n PM start啊。稍等。好呃，那也和大家说一下啊，如果各位在练习的时候，你这个时间等的太久啊，哪个时间呢？就是刚才启动脚手架这个时间就这个啊，我停一下，我重新来，同学就这个从你敲完n PM star一直等你打开浏览器，然后直到浏览器展示出页面，就这个过程，如果你等的时间太久，那就证明可能这个电脑要不就是说硬盘这个读写速度跟不上，或者是电脑就反应有点慢了，OK，我记得之前线下讲的时候呢，有一个同学的电脑就等到什么程度啊，等到浏览器都已经报了一个错误，说该网站无法响应，就是因为启动太慢了，你都已经触发浏览器那个超时的时间了，如果是这种情况呢，建议大家还是调整一下电脑啊，是换换硬件啊，还是重装一下系统对吧？哎，别耽误大家学习好了，来咱继续，现在呢，我点about就是about.home就是home控制台呢也打开，而且你注意啊同学，刷新也是没问题的，你看刷新也是没问题的，点about你看。

刷新也是没问题的，好，那接下来呢，我给你制造点问题啊，回到代码当中，我现在提一个需求啊，同学啊，我想让所有的路由路径前边加一个固定的前缀，可能是公司的名字啊，或者说呢，也有可能是这个某一个项目的名字，你就比如说我不想叫杠about，我想让这路径叫什么呢？杠艾特硅谷杠about可以吧，同学，我还没给你讲二级路由呢，可能有些同学呀，呃，学过view，然后就说老师明白，这不就是二级路由吗？同学，二级路由的写法跟这个确实是一样的，但是目前我还没有讲二级路由呢，对不对，哎，只是在说这个一级路由就是正常，哎写一个路由，所以说我只是有这么一个需求而已。同学，我问一下这个东西啊，你点完about要把路径变成什么样，这是不是咱说了算对吧？你想加个艾特硅谷，那你就加吗？

其实如果你不嫌费事，你可以写成这样嘛，只要1.about，我就把路径变为杠A，杠B-C-D啊，然后杠about是不是也行对吧？但是没人这么写，一般前边我们加一个固定的前缀，对吧？项目名或公司名来吧，那就写上杠艾特硅谷杠，我就把这杠艾特硅谷呢放到所有人前边，我这么一写，那就是点击about和home，就把路径变成了杠at硅谷杠about-at硅谷杠home，那你这呢，是不是也得诶相应的进行匹配啊，那我把这个test呢，就给它删掉了，行吧，同学，因为目前我用不上这个test，只是刚才我跟你说一下这个单一匹配效率的这个问题啊，这我就不要了，那PA下的这个test呢，我也不要了，给它删掉是吧？哎，要的时候一会再写呗，反正这玩意也快啊，这删掉，好同学，那你这是不是也得加上杠艾特硅谷这是不是也得加上啊，好嘞，来，你注意看啊，我把脚手架呢，停一下，我重新启动一下脚手架，让它干干净净的啊来，走好，开始启动走。

哎，稍等一会儿，等着他打开浏览器，好，那我把之前的那关掉，控制台呢，我也给你准备好啊，来同学我问你啊，现在一上来都是正常的，对不对，因为我没点呢，所以说这儿呢，不呈现about，也不呈现home OK，好了，点击about，同学，注意看这杠at特硅谷杠about，然后呢，人家就匹配上了，然后呢，人家就给你展示about组件了，对不对，好点home呢，那就是home，说老师这没什么问题啊，你注意观察，接下来他就有问题了啊，注意看我刷新页面，它就废了，来瞧着刷新。

同学，告诉我有什么问题，样式丢了，对吗？同学，如果你的应用变成了这个样子，那么毫无疑问，我的整个这个切换是不是都是拿这个boat strap，我就简称boatt，是不是都是拿boot写的样式？那么如果出现这种情况，就证明你的boatt根本就没有加载进来，对吗？同学，哎，那也就意味着你肯定有网络请求没回来是吧？那我们就切到network网络选项卡，我把刚才的东西都清掉，我重新刷新一下页面，那么瞪大各位的眼睛看，找到BOO strap.css那次请求是不是在这儿呢？

同学，这块如果啊，说意思，如果他要是报了一个404，我们就好理解了，啥意思，我找不到boat strap.css我没有成功的把boatp.CSS引入，所以说导致你这的样式就丢失了，是吧，那这就能说得通了，但是吧，这东西奇葩，它就奇葩在这儿，同学你看你的bootru.css网络选项卡告诉你是成功请求回来的，但是呢，哎呦喂，样式它就是丢。这啥情况呢？同学，这是一个非常细节上的问题啊，那这样同学们啊，你看着啊，我呢，先把这个杠艾特硅谷啊，我都去掉，还原成最开始的样子是吧，这干掉，这也干掉好，然后呢，我重新哎，我保存一下，然后我重新打开一个啊走来同学回来，我问你现在呀，你发现样式是正常的，你再刷新一下，那就证明boat strap.css是正常加载进来的，对不对，好了，同学不要只关注这，哎呀，Boat drop200那就成了，同学不要只关注这儿，那刚才还boat stra还200呢，那刚才那样式咋丢呢？对吧，我们点一下它，研究点细节上的东西啊，我再往这边动一动，大家注意观察，这个是什么意思呢？

他就是在告诉你，你这个boat drop.css是请求哪个路径请求回来的，他说是哪个路径是这个，那我们测试一下这个路径返回的东西到底是什么呢？嗯，我们打开这儿来敲回车，啊，还没敲呢，啊，还没敲呢，同学你注意看他找谁要，他找local house的3000要同学local house的3000是谁呀？就是我们的脚手架内置的那个服务器，就是通过web pack DV server开起来的那个服务器，哎，简称同学local house的3000就是你的脚手架，而且呢，React的脚手架里边通过web pack的配置，配置了一个东西，说public这个文件夹呀，就是local house的3000啊，这台内置服务器的跟路径。

我再说一下同学，Local house的3000是内置的一个服务器，用你写了吗？用你去拿express搭建吗？不用，全都是靠webpack里边有一个东西叫做DV server开启的，那为啥我非得开启一个服务器运行这个脚手架项目呢？目的是为了得到一个最真实的开发场景，对吧？项目一上线肯定都是主机名加端口号的形式去访问的，OK，所以说同学local house的3000就代表咱的脚手架，那脚手架里边你是不是写了一个public文件夹？同学这个public文件夹就相当于local host3000的根路径。

那你看啊，我要访问local house的3000下的CSS，那回到你的代码当中，Local house的3000，哎跟路径是不是在这儿呢？啊，然后访问跟路径下的CSS下的bootrap有没有有说老师那听你这意思，我还可以通过local house的3000杠直接访问这个网站的这个偏爱图标也是可以的，我们回到浏览器里先验证一个问题，这玩意儿到底能不能拿到样式，他100%能拿到，敲回车，同学，Boot drop是不是就位了？哎，那复制同学，你说通过这个地址，那理论上我是不是可以拿那个网站的偏爱图标啊，就这几哥们儿是吧，S icon.io来，那咱试一下对吧，走啊同学，但是你看你发现一个问题，诶拿不到，为啥呀？嗯，因为你多了这个杠CSS对不对，你把它删掉走。

是不是网站的图标对吧？哎，但是刚才我们好像观察出来一个问题，同学来来来，你说啊，撤回来，刚才那路径可不是这么写的，刚才的路径是local house的3000下的CSS下的这个图标，那我想问各位的是SS下。有那图标吗？没有，那正常情况我问大家，他是不是得告诉我该地址无法访问，或者是哎，本网站无法响应，因为你请求的东西是不是不存在。哎，那你看看，如果你请求了不存在的东西，他把啥给你了呀？仔细观察这是啥呀？同学，他脚手架里写了这么一个配置，就是如果你请求了一个不存在的资源，那么我就会把public里的index.html给你。

哎，不知道大家有没有听懂这一块，Public就是local house的3000那台内置服务器的跟路径，你请求啥我就给你啥，但是如果你请求的东西不存在，那么我也会给你点啥，给你啥呢，就给你这个，那所以说也就意味着同学如果我是找local house3000要A下的，B下的，C下的，D下的，E下的，F下的，然后呢，哈哈点JS，我问一下同学，咱就不说有没有，哈哈点JS吧，这些路径的层级，Public里边是不是就没有，Public里边有A文件夹吗？没有，有B吗？没有，那所以说这个时候如果你要请求走起同学，你会发现他还是把啥给你，他始终把index.html给你，有没有一种感觉，同学index.html其实是一个兜底的人。就如果说你请求的东西根本不存在，OK，那我就把这玩意儿给你对吧？爱是个兜底的人，好，如果这儿大家懂了，我们就可以这样做了，来关掉浏览器看着啊呃，那这样同学啊，我先打开一下，走，我把刚刚哎他请求BOO stra那个地址呢，我留下来，好吧，我留下来，同学啊，来，走，切到网络选项卡，该清的清掉啊来，你注意啊，同学，刷新。

是不是请求到BOO strap了啊，来点他请求的哪个地址，是不是这个地址啊好。存下来，打开我的文本编辑软件啊，那这个呢，关掉关掉，这都是之前咱看过的，是不是来调整一下配色方案，调的好看一点啊，在这儿好了啊，这是刚开始请求的这个地址哈，来放大一点，嗯，这地址，这个地址是能成功得到BOO strap的，对不对？同学好嘞啊，那这呢，我先不保存吧，就临时存在这行吧，临时存在这好了，回到页面当中，那你注意啊，我点击了go about，然后你注意啊，现在我执行刷新这个动作，我前边还没加艾特硅谷呢，各位没加呢，然后注意啊，我刷新是不是又请求boat strap了？同学，其实你都不用去想boat strap有没有请求成功，同学你说这样式都能正常，你说boattrap请没请求成功，当然请求成功了，那你看是哪个地址呢？我把这地址拿过来，同学你会发现其实他俩是一个地址，对不对，哎，是一个好，所以说呢。

你前边不加东西，样式也是不丢失的，说老师那样式，那我请求过来，那BOO drop是样式吗？第一个验证的方式就是你把这地址粘出去，新开一个页签桥回车，你看看他到底是不是样式，其实还有一个办法就是你点这response response是不是响应啊，你看你往这个地址发了请求，人家给你响应啥了呀，同学瞪大眼睛看这是不是都是样式呀？OK，样式是正常请求的，好了啊，来，我关掉前边开始加艾特硅谷，您各位看好了啊好，艾特硅谷呢，复制给后面来一份这一份，这一份好了，重新开走，打开。

稍等啊，他应该现在应该在编译当中啊，那这样吧，我停一下，我重新再开一下，走n PM start稍等啊。等等他。原来的关掉控制台呢，开好好了，同学啊，现在我刷新页面，由于我什么东西都没点，所以说是不是只是访问local house的3000，哎，然后你注意了，同学，你访问local house的3000，你没说要看什么，他就把啥给你呢，他就把index.html给你，然后你就拿到了index.html，然后你注意观察，回到代码当中，Public下的inex.atl是不是给你了，这个文件是不是给你了吧，啊，给我了，然后这个里边你是不是写了一个这个东西叫引入当前文件夹下的CSS，那我问一下当前文件夹下的CSS bootrap是不是有值，好好啊，这是有值的，所以说目前来看这些样式是不是都正常的，点击bootstrap，点击his请求的是不是还是刚才那个正确的地址，而且回来的东西还真就是样式，那接下来看好了。

啊，我点击about，我还没点呢，还没点呢，我把网络里边这些东西都清空，同学，我们都知道前端路由在你点的时候发送网络请求吗？根本不发送，其实也就是说同学现在这种场景，你觉不觉得其实boottrap已经就位了，已经可以正常工作了，已经成功的加载了，那剩下的事儿就是点击的时候变路径，然后来一次匹配，是不是就得了，走走走，所以说东西都是正常的，它没有重新请求both dropp，但是你要知道的是，你点击了about来，你注意这是不是写杠at硅谷完了杠about是吧，是不是比原来多了一个杠艾特硅谷好，你注意看，现在点肯定是没有任何的这个这个不正常的东西是吧？啊，因为我没有再请求吗？但是如果现在你刷新它就不对了，同学你刷一下走样式是不是丢了啊，你别急，我们看这虽然这告诉你说304 304啥意思，就是它走缓存了，你摁住shift。

强刷一下同学，他是不是告诉你boatstrap.css请求成功了呀，同学这个东西请求成功了是成功了，但是你主要看它返回的是什么，来点击bootrap先看这同学你注意观察这回啊，它的请求地址有点小问题，我粘在这，你和之前的形成一个对比，你告诉我同学一个特别不和谐的人混进去了，谁呢？杠艾特硅谷，他认为这个杠艾特硅谷也是哎路径的一部分。其实这个杠艾特硅谷是不是我们自己家的这么一个钱缀，那你想同学他去local house的3000艾特硅谷下，同学就不用再往后看了，就写到这儿你就已经输了，Local house的3000下跟路径是不是public，我问一下有at硅谷这个文件夹吗？没有，那所以说后边的东西啊，同学我都不用看了，回到这里边，后边的东西我都不用看了，你这个路径它就是不对的，所以说同学你一刷新，人家给3000发请求，而且最主要的是带着艾特硅谷，那你觉得层级是不是错了，那说老师错了，那就不能返回东西啊，刚才咱咋说的，有一个人是兜底的，我不管你写出了多么错误的东西，只要没对上，我就把index.atml是不是给你，所以说同学就这个地址啊，你把它复制，你粘到浏览器的地址栏里，你敲回车，同学你瞄一眼，它给你的是啥呢啊，它给你的就是那个index。

点HTML对不对？I，所以说你来到这儿，通过网络选项卡，咱就看这response同学，你看他给了你个啥？嗯，是不是那个index.html对吧？同学，哎，所以说事与愿违，你请求的是borub.css，由于你路径层级的错误，人家就把页面给你返回了，你看你说你请求的是样式，但是最终回来的却是一堆atml，所以说控制台也给你来了一个小小的警告，说哥们儿，不对呀，你说这个资源被标为了样式表，但是经过我的发现啊，经过我的编译，发现这里边怎么还好像是这种东西呢，好像是HTML呢，所以说你看人家给你个警告吗？OK，所以说同学我问一下大家什么时候样式会丢失？

对吧，咱得把这问题捋顺好，什么时候样式会丢失。同学，是我的路由出现多极的路径，它就丢失吗？不是同学，你看这一上来是不是正常，我路由是不是多极的路径丢了吗？没有，是你刷新的时候它才会丢，明白不？哎，也就是说你的路由路径是多极的结构，而且你一刷新就会造成样式的丢失，那丢失的原因就是他认为你多级的路径里边那个艾特硅谷，哎，也是3000里的一个路径，所以说他出的这个问题对吧？哎，那咱说说怎么解决呢？我在这一小节里把三种解决办法呢都跟大家说一下好吧，诶首先说第一个解决办法，我先把浏览器关掉，同学最小化第一个解决办法啊，来到public里边的index.html里边，兄弟你这别写点。

你把那点删了就好了，好打开慢慢来，同学一上来肯定是正常的，对不对啊，一上来你看你请求3000，哎，然后他就把index.html给你，因为只有一个页面嘛，同学对不对，单页面应用只有一个页面嘛，他就把index.html给你，同学单页面应用你不看index.html你还看啥对吧？哎，所以他把这给你了，给你之后呢，你就请求both stra，所以说这你看返回的确实是样式，这正常对吧，点击about点击后也正常，主要是刷新的一下子对不对？来同学注意看来刷走。

再刷再刷是不是正常的？来，那我们看一下同学，你刚才把那个点一旦去掉了，你发现它请求BOO strap的路径啊，就正常了，你看就直接是哎3000下的CSS，我问你他还读这个吗？艾特硅谷吗？不读了，说这为什么呢？因为你这如果写了点杠，兄弟这啥意思啊，就以当前的这个路径，这是相对路径对不对？点杠的意思就是以当前文件出发，哎，然后在当前文件夹下去找，那你这么一写，他在这就把艾特硅谷也带着，如果你不写这个点杠啥意思呢？这个的意思就是杠，CSS啥意思，就是直接去local host3000去请求东西，然后他下的CSS下的，然后boat drop是吧，哎，我就不写了，点点点，然后是不是就正常了呀？所以说第一个解决办法就是把这个点咋它给它去掉啊，还有第二个解决办法，你注意看，就是不写点，但。

我写谁呢？我写这个百分号public url100分号这什么意思呀，之前就跟大家聊过是吧，分析脚手架的时候，这个public URL代表的就是public这个东西的绝对路径，由于你写死了是绝对路径，所以说它不可能出问题，哎，所以说你用public URL也是可以的，来那我们试一下啊，之前的都关掉重新开。走一上来是不是正常的，好了，切到控制台，然后呢，刷新一下啊，然后点击about home都没问题，主要是刷新刷新刷新是不是也正常的啊，正常的原因是因为你请求的路径没有错误，对吧？Local host的3000下的CSS下的boot dropp.CSS诶这是第二个解决办法，就是可以哎写上百分号WL100分号对不对？哎，好了，还有第三个解决办法，说老师你说这怎么办？我就想写这点，就想写点也行啊，可以不改这里改另外一个地方也行，来原来的东西呢，我给它关掉。

好，大家注意看，改哪呢？你注意我来到src里的index，我不用b rotor，我用哈希，RO特来哈希。Ror这也改哈希ror好，这个时候你注意重新打开应用，同学我们都知道啊，来打开了，同学我们都知道哈，这个哈希roer呢，跟b roer差哪呢？是不是就差一下这个井号，它有点慢才出来啊，是不是差这个井号好，同学多一个井号不要紧，我不知道在座的各位还记不记得了，井号后边的东西，他都认为是前端的资源，根本就不带给3000这台服务器，那所以说这个时候你注意观察啊，点击about，点击home，你所有的杠艾特硅谷什么乱七八糟的那些东西都是出现在井号后边的，所以说同学你注意，当你刷新页面的时候，他给3000发请求的时候，自动忽略这些东西了，就都不看了，忽略了他说那是前端资源，我不带给3000，所以说你刷新你刷新你刷新怎么样东西是不是都正常，那你看这个boat dropp呢，诶在哪呢啊，我再刷新一下走，应该有挨这呢啊。

刚才可能是缓存问题，他就没有展示，同学你练习这会儿的时候，我奉劝大家摁住你键盘上的shift键，你在刷新，这叫强制刷新，不走缓存啊，那同学你看一下路径是不是也是对的呀？哎，3000下的说老师他为什么不带着艾特硅谷呢？因为他看到了井，他说井后边的都是哈希值，算了，我请求3000的时候我可不带，那这样的话是不是就直接是3000下的CSS，那也就是说以你在index里边写的这个为主了，你不说CSS吗？那我就哎CSS当前路径下，那当前路径为什么没出问题呢？因为后边这块他不看呢，对吧？哎，这也能解决，所以说同学解决啊这个样式丢失呢，有三种方法啊，前两种呢，都是修改这个地方，那还有一种呢，就是改这个路由的模式，知道吧，哎，同学说一下啊，这种啊说用哈希RO去处理样式丢失的问题，其实少见。

啊，这会儿呢，我们一般正常还是用b ror，这也是b ror OK，其实同学你看谁就知道呢，你看美团就行对吧，像这种大战是吧，它都是用react写的，你打开同学这react标亮呢，代表啥意思啊，美团是用react写的，老师人的标亮子那么漂亮呢，我们的标怎么看红色的还趴了个臭虫，那是因为你的项目没有经过打包，如果你的项目打包之后真正部署上限了，同学我们的网站跟美团一样，也是哎正常的react logo，你点击美食是吧，然后呢，你再点，你比如说就这家是吧，随便点一个啊你打开同学你看杠美食，哎杠，这应该就是这个店家的编号对吧？所以说同学你看你见到井了吗？哎，没有说，老师那刷新那样式会不会丢失呢？你觉得呢，这肯定不会的呀，啊，你刷新一下是不是还在，哎，所以说同学一般来说解决问题不是说把这个路由器。

给它变一变啊，一般我们都在这儿，所以说同学们这个public URL啊，两边带百分号的这个，这不就起作用了吗？哎，所以说脚手架设计这个还是有道理的，但是一般来说我们就直接把这个点儿给它删掉就可以了，OK啊，解决样式丢失问题的三种办法，稍后给大家形成笔记，那这小节呢，我们停一下。