接下来是注释:

一.优化用户体验

后面咱们曾经实现了，对主页面的刷新，不会失落用户登录信息的性能。接下来让咱们思考上面一个场景，我敞开浏览器，输出localhost:3000该页面还是会间接进入到login，然而用户有可能是手抖，或者某些起因，并不是想真正敞开网页，那么咱们就须要设计当用户再次登陆localhost:3000的时候，间接进入主页面而不是登陆页面。

1.思路清晰首先来到登陆页面

咱们都晓得react函数组件必须有一个返回值也就是必须return一些组件来渲染页面，然而你是否疏忽了它自身就是一个函数呢？如果它和react毫无关系的话，你必定能够想到if语句来判断，然而正因为它是react的语法，所以对于初学者来说经常把它想的太过于浅近，误认为这就是react的固定写法，然而却疏忽了react只是JS的语法库而已，故在学习的过程中肯定要带入本人的思考，不要为了实现成果而去做这件事，肯定要分明，后果不是目标，过程才是咱们成长的重中之重。

理分明组件自身就是一个函数，那么咱们就能够在它的return里做文章

这里次要的思路就是，在loginIn这个界面做一个重定向，如果以后localStorage.getItem有值，那么咱们就能够重定向路由到<Dashboard>这个组件。在这里咱们还有一个小bug须要解决，当咱们进入<Dashboard>页面时，

2.思考主页面的成果

咱们把Local Storage里的信息分明当前，刷新页面，页面并不会跳转到<Login>组件，并且·你好${userName}也会变成undefined，起因就在于，咱们以后所处的页面其实是<Dashboard>这个页面，浏览器会缓存这个页面信息，但其实咱们真正心愿的是页面能够返回到<Login>,同理，咱们须要在<Dashboard>这个组件里做同样的判断：

这时候咱们分明localStorage里的用户信息后，就会跳转到<Login>了。

二.实现退出登录的成果

前置工作都筹备好了，接下来只须要想方法实现点击按钮把localStorage里的用户信息分明就能够了，so easily,给按钮调用咱们曾经封装好的localStorage的removeItem()办法即可。

这里可能会让人产生疑难，我不是曾经在<Dashboard>做过逻辑判断了吗？

为什么还要重写navigate（‘/login’）呢？这个问题留给敌人们本人思考吧～

三.主页路由跳转的实现

咱们临时须要用到首页，商品这个两个选项。咱们先实现首页这个组件的出现。

1.设置子路由

应用路由的时候，咱们须要思考咱们心愿它出现在哪个局部，当初能够确定是出现在<Dashboard>这个页面的，因为咱们应用的react-router-dom V6，能够用路由表来实现字路由的跳转，所以先在<Dashboard>里占一个地位，要用就的Outlet就得先引入:

而后

2.设置路由表

因为是<Dashboard>的字路由，所以间接在这个门路下创立children对象，留神，children属性的值是一个数组。就和最外层的useRoutes一样，接管一个数组。

这时候刚进入<Dashboard>还不会主动跳转到首页，这时候别忘了设置一下重定向

3.设置<Link>

首先引入react-router-dom里的<Link>组件，因为我应用的Material UI组件库有本人封装的link组件，为了防止当前产生一下不必要的麻烦，所以我给react的link重命名Rlink而后再引入。

接来下让ListItem体现为{Rlink}即可增加to属性定向到咱们的home留神，这里不要写成to='/home'这样你示意的是一级路由，意思是在localhost:3000前面寻找/home组件，然而咱们其实是没有这个组件的，就会报错。（你是在想写斜杠，就要写成to="./home"，代表在以后门路下寻找home组件）

让咱们看看成果

点击登陆，马上跳转到<Home>组件，性能实现。