开始记录过程的时候，切记不要马上敲代码。稍微复习一下你之前用过的知识，可以让你的思路更清晰。复习上一篇文章中用到的知识。基于React.js开发后台管理系统的全过程（二）1.如何解决跨域问题2.路由表的配置3.window对象下，localStorage.getItem/setItem/的使用removeItemmethods接下来是正文：1.优化用户体验上一篇我们已经完成了。刷新主页面不会丢失用户登录信息的功能。接下来，让我们考虑以下场景。我关闭浏览器并输入localhost:3000。页面还是会直接进入登录，但是用户可能会瑟瑟发抖，或者因为某些原因，并不想关闭网页，所以我们需要设计成当用户登录localhost时：3000，他会直接进入主页面而不是登录页面。1、思路清晰首先，来到登陆页面，我们都知道react函数组件是必须要有返回值的，也就是必须返回一些组件来渲染页面，但是你有没有忽略它是一个功能本身？如果和react无关，肯定可以想到if语句来判断，但是因为是react的语法，初学者往往想得太深，误以为这是react的固定写法，但是忽略react只是一个js的语法库，所以在学习的过程中一定要带着自己的思考，不要为了达到结果而去做，一定要清楚，结果不是目的，过程才是我们的增长的重中之重。明确组件本身是一个函数，那我们就可以在它的返回上做文章了。这里的主要思想是在loginIn界面上做一个重定向。如果当前localStorage.getItem有值，那么我们就可以将路由重定向到这个组件。这里我们还有一个小bug需要解决。当我们进入页面时，2.想想主页面的效果。清除LocalStorage中的信息并刷新页面后，页面不会跳转到组件，hello${userName}也会变成undefined，原因是我们当前所在的页面其实是页面，浏览器会缓存页面信息，但实际上我们真正想要的是页面可以返回。同样，我们需要在组件中做同样的判断：此时我们知道localStorage中的用户信息后，会跳转到。2、实现注销和登录的效果。前期工作准备就绪。接下来只需要想办法点击按钮就可以清空localStorage中的用户信息了。如此简单，将按钮调用到我们封装好的localStorage的removeItem()方法中。这里可能会有疑问，我不是已经在里面做了逻辑判断了吗？为什么要重写navigate('/login')？这个问题留给小伙伴们自己去思考吧~3、实现首页路由跳转，我们暂时需要用到首页和商品的两个选项。我们先来实现首页组件的渲染。1、在设置子路由使用路由的时候，我们需要想好我们希望它显示在哪个部分。现在我们可以确定它显示在页面，因为我们使用了react-router-domv6，可以用路由表实现子路由的跳转，所以先在中占一个位置，要用的Outlet要先导入：然后2.设置路由表，因为是的子路由，所以直接在这个路径下创建children对象，注意children属性的值是一个数组。就像最外层的useRoutes一样，它接收一个数组。这时候直接进入是不会自动跳转到首页的。这时候别忘了设置重定向3.设置首先在react-router-dom中引入组件，因为我使用的是MaterialUI组件库，有自己封装的link组件。为了避免以后出现不必要的麻烦，我把react链接重命名为Rlink，然后引入。接下来让ListItem显示为{Rlink}然后加上to属性直接指向我们的home注意，这里不要写to='/home'这样你代表一级路由，意思是在后面找/homelocalhost:3000组件，但是我们实际上没有这个组件，会报错。（如果要写斜线，就写成to="./home"，意思是在当前路径中寻找home组件。）来看看效果吧。点击登录，立即跳转到组件，功能实现。
