image.png


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

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

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

1.如何解决跨域问题

2.路由表的配置

3.window对象下的,localStorage.getItem/setItem/removeItem方法的使用

接下来是正文:

一.优化用户体验

前面我们已经完成了,对主页面的刷新,不会丢失用户登录信息的功能。接下来让我们思考下面一个场景,我关闭浏览器,输入localhost:3000该页面还是会直接进入到login,但是用户有可能是手抖,或者某些原因,并不是想真正关闭网页,那么我们就需要设计当用户再次登陆localhost:3000的时候,直接进入主页面而不是登陆页面。

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

image.png
我们都知道react函数组件必须有一个返回值也就是必须return一些组件来渲染页面,但是你是否忽略了它本身就是一个函数呢?如果它和react毫无关系的话,你肯定可以想到if语句来判断,但是正因为它是react的语法,所以对于初学者来说常常把它想的太过于高深,误认为这就是react的固定写法,然而却忽略了react只是JS的语法库而已,故在学习的过程中一定要带入自己的思考,不要为了实现效果而去做这件事,一定要清楚,结果不是目的,过程才是我们成长的重中之重。

理清楚组件本身就是一个函数,那么我们就可以在它的return里做文章

image.png

这里主要的思路就是,在loginIn这个界面做一个重定向,如果当前localStorage.getItem有值,那么我们就可以重定向路由到<Dashboard>这个组件。在这里我们还有一个小bug需要解决,当我们进入<Dashboard>页面时,

image.png

2.思考主页面的效果

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

image.png

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

二.实现退出登录的效果

image.png

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

image.png

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

image.png

为什么还要重写navigate(‘/login’)呢?这个问题留给朋友们自己思考吧~

三.主页路由跳转的实现

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

1.设置子路由

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

image.png

然后

image.png

2.设置路由表

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

image.png

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

image.png

3.设置

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

image.png

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

image.png

让我们看看效果

image.png

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

image.png