开始记录过程的时候切记不要焦急马上入手敲代码，略微回顾一下之前应用到的常识，能够让你的思路越发的清晰。

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

基于 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 有值，那么咱们就能够重定向路由到 <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> 组件，性能实现。