夏天好热啊～本文章推荐开放空调阅读😊👉便携式迷你小空调
由于采用了黑科技，手机听筒放在脸庞可以有微风吹过，电脑端暂时没有实现，后续会继续优化~.
tips:这个空调我的文章中也有哦～
开始记录过程的时候切记不要着急马上动手敲代码，稍微回顾一下之前使用到的知识，可以让你的思路越发的清晰。
回顾一下,上一篇所用到的知识。
1.如何解决跨域问题
2.路由表的配置
3.window对象下的，localStorage.getItem/setItem/removeItem方法的使用
接下来是正文:
一.优化用户体验
前面我们已经完成了，对主页面的刷新，不会丢失用户登录信息的功能。接下来让我们思考下面一个场景，我关闭浏览器，输入localhost:3000该页面还是会直接进入到login，但是用户有可能是手抖，或者某些原因，并不是想真正关闭网页，那么我们就需要设计当用户再次登陆localhost:3000的时候，直接进入主页面而不是登陆页面。
1.思路清晰首先来到登陆页面
我们都知道react函数组件必须有一个返回值也就是必须return一些组件来渲染页面，但是你是否忽略了它本身就是一个函数呢？如果它和react毫无关系的话，你肯定可以想到if语句来判断，但是正因为它是react的语法，所以对于初学者来说常常把它想的太过于高深，误认为这就是react的固定写法，然而却忽略了react只是JS的语法库而已，故在学习的过程中一定要带入自己的思考，不要为了实现效果而去做这件事，一定要清楚，结果不是目的，过程才是我们成长的重中之重。
理清楚组件本身就是一个函数，那么我们就可以在它的return里做文章
这里主要的思路就是，在loginIn这个界面做一个重定向，如果当前localStorage.getItem有值，那么我们就可以重定向路由到<Dashboard>这个组件。在这里我们还有一个小bug需要解决，当我们进入<Dashboard>页面时，
2.思考主页面的效果
我们把Local Storage里的信息清楚以后，刷新页面，页面并不会跳转到组件，并且·你好${userName}也会变成undefined，原因就在于，我们当前所处的页面其实是<Dashboard>这个页面，浏览器会缓存这个页面信息，但其实我们真正希望的是页面可以返回到<Login>,同理，我们需要在这个组件里做同样的判断：
这时候我们清楚localStorage里的用户信息后，就会跳转到<Login>了。
二.实现退出登录的效果
前置工作都准备好了，接下来只需要想办法实现点击按钮把localStorage里的用户信息清楚就可以了，so easily,给按钮调用我们已经封装好的localStorage的removeItem()方法即可。
这里可能会让人产生疑问，我不是已经在做过逻辑判断了吗？
为什么还要重写navigate（‘/login’）呢？这个问题留给朋友们自己思考吧～
三.主页路由跳转的实现
我们暂时需要用到首页，商品这个两个选项。我们先实现首页这个组件的呈现。
1.设置子路由
使用路由的时候，我们需要思考我们希望它呈现在哪个部分，现在可以确定是呈现在<Dashboard>这个页面的，因为我们使用的react-router-dom V6，可以用路由表来实现字路由的跳转，所以先在<Dashboard>里占一个位置，要用就的Outlet就得先引入:
然后
2.设置路由表
因为是<Dashboard>的字路由，所以直接在这个路径下创建children对象，注意，children属性的值是一个数组。就和最外层的useRoutes一样，接收一个数组。
这时候刚进入<Dashboard>还不会自动跳转到首页，这时候别忘了设置一下重定向
3.设置
首先引入react-router-dom里的<Link>组件，由于我使用的Material UI组件库有自己封装的link组件，为了避免以后产生一下不必要的麻烦，所以我给react的link重命名Rlink然后再引入。
接来下让ListItem表现为{Rlink}即可添加to属性定向到我们的home注意，这里不要写成to='/home'这样你表示的是一级路由，意思是在localhost:3000后面寻找/home组件，但是我们其实是没有这个组件的，就会报错。（你是在想写斜杠，就要写成to="./home"，代表在当前路径下寻找home组件）
让我们看看效果
点击登陆，马上跳转到<Home>组件，功能实现。
