基于React.js的后台管理系统开发全过程(三)

---

开始记录过程的时候切记不要着急马上动手敲代码，稍微回顾一下之前使用到的知识，可以让你的思路越发的清晰。

回顾一下,上一篇所用到的知识。

基于React.js的后台管理系统开发全过程(二)

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有值，那么我们就可以重定向路由到这个组件。在这里我们还有一个小bug需要解决，当我们进入页面时，

2.思考主页面的效果

我们把Local Storage里的信息清楚以后，刷新页面，页面并不会跳转到组件，并且·你好${userName}也会变成undefined，原因就在于，我们当前所处的页面其实是这个页面，浏览器会缓存这个页面信息，但其实我们真正希望的是页面可以返回到,同理，我们需要在这个组件里做同样的判断：

这时候我们清楚localStorage里的用户信息后，就会跳转到了。

二.实现退出登录的效果

前置工作都准备好了，接下来只需要想办法实现点击按钮把localStorage里的用户信息清楚就可以了，so easily,给按钮调用我们已经封装好的localStorage的removeItem()方法即可。

这里可能会让人产生疑问，我不是已经在做过逻辑判断了吗？

为什么还要重写navigate（‘/login’）呢？这个问题留给朋友们自己思考吧～

三.主页路由跳转的实现

我们暂时需要用到首页，商品这个两个选项。我们先实现首页这个组件的呈现。

1.设置子路由

使用路由的时候，我们需要思考我们希望它呈现在哪个部分，现在可以确定是呈现在这个页面的，因为我们使用的react-router-dom V6，可以用路由表来实现字路由的跳转，所以先在里占一个位置，要用就的Outlet就得先引入:

然后

2.设置路由表

因为是的字路由，所以直接在这个路径下创建children对象，注意，children属性的值是一个数组。就和最外层的useRoutes一样，接收一个数组。

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

3.设置

首先引入react-router-dom里的组件，由于我使用的Material UI组件库有自己封装的link组件，为了避免以后产生一下不必要的麻烦，所以我给react的link重命名Rlink然后再引入。

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

让我们看看效果

点击登陆，马上跳转到组件，功能实现。