React学习（十一）

目录：

1.react-进阶-router-入门

2.react-进阶-router-404-懒加载-嵌套路由

3.react-进阶-router-动态路由1

4.react-进阶-router-动态路由2

1.react-进阶-router-入门

跟组价我们是没有区分路径的，学一个进行注释加一个，我们要学会给不同的组件不同路径，通过访问不通的路径，跳转到不同的组件

安装：

实现路径跟组件的映射，新建一个存储路径跟组件对应关系的文件：

根组件使用这个：

没写斜杠默认有的进入主页路由组件

这个路由适合新的版本，老的版本可能不是这样用

输入一个不存在的路径，显示了一个空白页

重定向

2.react-进阶-router-404-懒加载-嵌套路由

这样写的是静态路由表，后面路径可能是动态的后端返回的，我们需要学习懒加载，配合后面的动态路由

懒加载：用到时才加载

嵌套路由：

把主页进行布局：

内容部分是可变的：

这些组件是在主页组件的基础上进行的跳转：

子路由显示到内容部分：

3.react-进阶-router-动态路由1

这里可以分为静态路由跟动态路由，登录之后的路由是动态的，根据角色有不同的菜单

动态路由从后端获取：

前端的路由是变化的，我们需要重建路由对象，我们需要把路由表的数据用store：mobx管理起立

4.react-进阶-router-动态路由2

监听路由的变化

访问动态路由，会报404

当点击登录，调用动态路由，这个页面表单中按钮类型是submit，会触发一个onFinish事件

他会帮助我们验证表单：只有通过验证才会触发onFinish

这里会监听路由对象

登录之前：静态路由

这里只是不是真正的登录逻辑，只是用到了用户名取查询数据库，去更新路由

此时是有问题的，输入student，还是不行，此时出现在页面刷新上

BrowserRouter这种路由模式，在不通的路由之间跳转，会导致前端服务器页面发送请求，刷新页面

页面刷新，导致RouterStore重新执行，导致记录的数据就丢失了

页面刷新，重新执行被创建的代码

解决这个问题

把路由缓存起来：用LocalStotage本地缓存，即使浏览器关闭也会存在

当注销的时候清空路由，写一个清空的方法