route

Author: lemonc747

route/JS路由原理.md

@@ -4,16 +4,22 @@
 
 ## 1.1 比较两种
 1. 是否需要服务器支持？
-  - hash不需要，因为`#hash`并没有改变url的地址，始终指向同一个地址，可以静态部署
-  - history需要，url改变了，需要服务器把所有路由都重定向到根页面
+    - hash不需要，因为`#hash`并没有改变url的地址，始终指向同一个地址，可以静态部署
+    - history需要，url改变了，需要服务器把所有路由都重定向到根页面
 2. 用户访问url或手动刷新时？
-  - hash：始终返回同一个html，静态地址即可
-  - history：访问非根目录的路由时，需要后端重定向到根页面，并返回根页面的html
+    - hash：始终返回同一个html，静态地址即可
+    - history：访问非根目录的路由时，需要后端重定向到根页面，并返回根页面的html
 3. 用户在页面内进行跳转时？
-  - 都不会向服务器发起请求，执行内部的js代码
+    - 都不会向服务器发起请求，执行内部的js代码
 4. 跳转的参数
-  - hash：hash值就是参数，参数携带在url中
-  - history：参数携带在state中
+    - hash：hash值就是参数，参数携带在url中
+    - history：参数携带在state中
+
+## 1.2 三种行为对应的事件
+1. 页面加载或刷新：触发onload事件
+2. 相同url下改变hash：触发hashchange事件
+3. history路由切换：无官方事件触发
+4. 导航的前进后退：触发onpopstate事件
 
 ## 现象1：在https://lemonc747.github.io/react-playground/内路由跳转可以正常跳转，但刷新后就github-404页面了？
 因为`github.io`上是静态的html，访问根页面时，url指向根页面的地址正确。
@@ -25,7 +31,6 @@
 在url中添加`#[hash]`，即可改变url的hash值。
 
 原理：通过监听全局的`hashChange`事件，当url的hash改变时进行判断和匹配
-
 ![](./assets/hash_route.jpeg)
 
 ```ts
@@ -46,15 +51,25 @@ window.onhashchange = () => {
 location.hash = "#hash1";
 ```
 
-### hash路由的应用
-### hash注意点
-1. 改变url的hash值，不会触发页面的重新加载（load事件），会触发hashchange事件
-
 # 三 history路由
-在保持url同源的情况下，改变url。
-
 ![](./assets//history_route.jpeg)
 
+## 3.1 history api
+[reference:MDN-history](https://developer.mozilla.org/en-US/docs/Web/API/History)
+
+- forward: 导航前进
+- back: 导航后退
+- go: 导航前进或后退几页
+- pushState: 添加新的历史记录
+- replaceState: 修改当前页的历史记录
+- onpopstate: 导航前进或后退时触发，获取当前历史记录携带的state数据
+
+### pushState
+```ts
+(method) History.pushState(data: any, unused: string, url?: string | URL | null | undefined): void
+```
+
+
 
 # 四 浏览器URL跳转原理
 

route/react-router.md

@@ -0,0 +1,3 @@
+# react-router
+
+## 主要概念 main concept