React 路由与项目实践 | 青训营笔记

88 阅读3分钟

一、原理

1-1.react-router-history

(1)定义

History:History接口允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录。

hash :通过 hash 对象改变地址栏地址时,可以用 hashchange 事件来监控页面路径 hash 变化更新页面。

History作用:响应和监听 URL的变化,同时将解析之后的结果响应给router match。

MemoryHistory:内存历史将当前位置存储在内存中,它是为在有状态的非浏览器环境(如测试和响应本机)中使用而设计的。

BrowserHistory:浏览器历史记录将位置存储在常规URL中。这是大多数Web应用程序的标准,但它需要在服务器上进行一些配置,以确保您*在多个URL上服务同一个应用程序。

HostHistory:Hash历史将该位置存储在window.Location.,hash中。这使得它成为理想的当你不想发送位置到服务器的出于某种原因,要么是因为你不能配置它,或者URL空间是预留给其他东西。

(2)源码:

分析:history方法也通过调用了Windows上面的window.history,将location暴露,调用其他的方法。

1-2.RouterMotch

URL Match:进行路由的匹配之后,进行路由的渲染。

1-3. HashRouter与BrowserRouter的差异

(1)原理上

HashRouter:使用的是URL的哈希值。(# 符号的英文叫hash,所以叫HashRouter,和散列没关系哦)

BrowserRouter:使用的是H5的historyAPI,不兼容IE9及以下版本。

(2)用法上

BrowserRouter进行组件跳转时可以传递任意参数实现组件间的通信

HashRouter不能(除非手动拼接URL字符串),因此一般配合Redux使用,实现组件间的数据通信。

(3)生产实践上

HashRouter

HashRouter相当于锚点定位,因此不论#后面的路径怎么变化,请求的都相当于是#之前的那个页面。可以很容易的进行前后端不分离的部署(也就是把前端打包后的文件放到服务器端的public或static里),因为请求的链接都是ip地址:端口/#/xxxx,因此请求的资源路径永远为/,而其他的后端API接口都可以正常请求,不会和/冲突,由于前后端不分离也不会产生跨域问题。

BrowserRouter

因为BrowserRouter模式下请求的链接都是ip地址:端口/xxxx/xxxx,因此相当于每个URL都会访问一个不同的后端地址,如果后端没有覆盖到路由就会产生404错误。

可以通过加入中间件解决,放在服务器端路由匹配的最后,如果前面的API接口都不匹配,则返回index.html页面。但这样也有一些小问题,因为要求前端路由和后端路由的URL不能重复。

解决方法:

进行前后端分离的部署,采用不一样的端口,使用Nginx反向代理服务器进行请求分发。前端向后端发起请求的URL为nginx所在的服务器+/api/xxx,通过NGINX的配置文件判断,如果URL以api开头则转发至后端接口,否则转发至前端的地址,访问项目只需访问Nginx服务器即可。

二、实践项目

(1)页面加载

image.png

(2)数据加载

image.png 处理方法: 使用next和remix

image.png

总结