react 路由的基本原理及实现

1. react 路由原理

不同路径渲染不同的组件
有两种实现方式
● HasRouter 利用hash实现路由切换
● BrowserRouter 实现h5 API实现路由切换

1. 1 HasRouter

利用hash 实现路由切换
在这里插入图片描述

1.2 BrowserRouter

利用h5 Api实现路由的切换

1.2.1 history
  • HTML5规范给我们提供了一个history接口
  • HTML5 HIstory API包含两个方法:history.pushState()和history.replaceState(),和一个事件
    window.onpopstate pushState
1.2.1.1 history.pushState(stateObject,title,url)

● 第一个参数用于存储该url对应的状态对象,该对象可在onpopstate事件中获取,也可在history对象中获取
● 第二个参数是标题,目前浏览器并未实现
● 第三个参数是设定的url
pushState函数向浏览器的历史堆栈中压入一个url为设定值的记录,并改变历史堆栈的当前指针至栈顶

1.2.1.2 replaceState

● 该接口与pushState参数相同,含义 也相同
● 唯一的区别在于replaceState是替换浏览器历史栈中的当前历史记录为设定的url
● 需要注意的是replaceState 不会改动浏览器历史堆栈的当前指针

1.2.1.3 onpopstate

● 该事件是window属性
● 该事件会在调用浏览器的前进,后退以及在执行history.forward,history.back 和history.go 的时候触发。因为这些操作有一个共性,即修改了历史堆栈的当前指针
● 在不改变document 的前提下,一旦触发当前指针改变则会触发onpopstate事件

2 实现基本路由

2.1 HashRouter 基本用法及实现

import React from 'react';
import { Router } from '../react-router';
import { createHashHistory } from '../history';
class HashRouter extends React.Component {constructor(props) {super(props);this.history = createHashHistory(props)}render() {return (<Router history={this.history}>{this.props.children}</Router>)}
}
export default HashRouter;

history 下的 createHashHistory.js

/*** 工厂方法,用来返回一个历史对象*/
function createHashHistory(props) {let stack = [];//模拟一个历史条目栈,这里放的都是每一次的locationlet index = -1;//模拟一个当前索引let action = 'POP';//动作let state;//当前状态let listeners = [];//监听函数的数组let currentMessage;let userConfirm = props.getUserConfirmation?props.getUserConfirmation():window.confirm;function go(n) {//go是在历史条目中跳前跳后,条目数不会发生改变action = 'POP';index += n;if(index <0){index=0;}else if(index >=stack.length){index=stack.length-1;}let nextLocation = stack[index];state=nextLocation.state;window.location.hash = nextLocation.pathname;//用新的路径名改变当前的hash值}function goForward() {go(1)}function goBack() {go(-1)}let listener = ()=>{let pathname = window.location.hash.slice(1);// /users#/api  /apiObject.assign(history,{action,location:{pathname,state}}); if(action === 'PUSH'){stack[++index]=history.location;//1 2 3 6 5 //stack.push(history.location);}listeners.forEach(listener=>listener(history.location));}window.addEventListener('hashchange',listener);//to={pathname:'',state:{}}function push(to,nextState){action = 'PUSH';let pathname;if(typeof to === 'object'){state = to.state;pathname = to.pathname;}else {pathname = to;state = nextState;}if(currentMessage){let message = currentMessage({pathname});let allow = userConfirm(message);if(!allow) return;}window.location.hash = pathname;}function listen(listener) {listeners.push(listener);return function () {//取消监听函数,如果调它的放会把此监听函数从数组中删除listeners = listeners.filter(l => l !== listener);}}function block(newMessage){currentMessage = newMessage;return ()=>{currentMessage=null;}}const history = {action,//对history执行的动作push,go,goBack,goForward,listen,location:{pathname:window.location.hash.slice(1),state:undefined},block}if(window.location.hash){action = 'PUSH';listener();}else{window.location.hash='/';}return history;
}export default createHashHistory;

2.2 BrowserRouter基本用法及实现

import React from 'react';
import { Router } from '../react-router';
import { createBrowserHistory } from '../history';
class BrowserRouter extends React.Component {constructor(props) {super(props);this.history = createBrowserHistory(props)}render() {return (<Router history={this.history}>{this.props.children}</Router>)}
}
export default BrowserRouter;

history 下的 createBrowserHistory.js

/*** 工厂方法,用来返回一个历史对象*/
function createBrowserHistory(props){let globalHistory = window.history;let listeners = [];let currentMessage;let userConfirm = props.getUserConfirmation?props.getUserConfirmation():window.confirm;function go(n){globalHistory.go(n);}function goForward(){globalHistory.goForward();}function goBack(){globalHistory.goBack();}function listen(listener){listeners.push(listener);return function(){//取消监听函数,如果调它的放会把此监听函数从数组中删除listeners = listeners.filter(l=>l!==listener);}}window.addEventListener('popstate',(event)=>{//push入栈 pop类似于出栈setState({action:'POP',location:{state:event.state,pathname:window.location.pathname}});});function setState(newState){Object.assign(history,newState);history.length = globalHistory.length;listeners.forEach(listener=>listener(history.location));}/*** push方法* @param {*} path 跳转的路径* @param {*} state 跳转的状态*/function push(to,nextState){//对标history pushStateconst action = 'PUSH';let pathname;let state;if(typeof to === 'object'){state = to.state;pathname = to.pathname;}else {pathname = to;state = nextState;}if(currentMessage){let message = currentMessage({pathname});let allow = userConfirm(message);if(!allow) return;}globalHistory.pushState(state,null,pathname);let location = {state,pathname};setState({action,location});}function block(newMessage){currentMessage = newMessage;return ()=>{currentMessage=null;}
}const history = {action:'POP',//对history执行的动作push,go,goBack,goForward,listen,location:{pathname:window.location.pathname,state:globalHistory.state},block}return history;
}export default createBrowserHistory;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/708340.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android studio (一) 新建一个Android项目 编程语言为Java

一、下载Android studio 下载 Android Studio 和应用工具 - Android 开发者 | Android Developers 这里我下载的是2023年的 二、新建项目 选择如下模板。 填写项目名、项目保存位置、编程语言、最低支持Android API的版本、打包编译模式 三、报错Connection refused: no …

GO语言学习笔记(与Java的比较学习)(四)

结构体 一个结构体&#xff08;struct&#xff09;就是一组字段&#xff08;field&#xff09;。 package main ​ import "fmt" ​ type Vertex struct {X intY int } ​ func main() {fmt.Println(Vertex{1, 2}) } 结构体中的字段用 . 访问 package main ​ im…

【GB28181】wvp-GB28181-pro快速适配 连接SQlite3数据库

引言 wvp最新项目支持mysql等数据库, 如果本地没有安装mysql等数据库,并想直接可以运行wvp项目,需要进行二次修改。 本文包含:WVP最新代码适配SQlite3数据库 运行平台:windows或linux 文章目录 一、为何使用SQlite二、配置修改2.1 添加SQlite3依赖2.2 修改SQlite3不支持的…

进程的通信以及信号的学习

一&#xff0c;进程的通信&#xff1a; 种类&#xff1a;1.管道 2.信号 3.消息队列 4.共享内存 5.信号灯 6.套接字 1.管道: 1.无名管道 无名管道只能用于具有亲缘关系的进程间通信 pipe int pipe(int pipefd[2]); 功能: 创建一个无名管道 …

Rust 交叉编译 macOS 为 Linux 和 Windows

文章目录 前言环境案例macOS 编译为 Linux 和 Windows 可用二进制程序编译为 Linux 平台编译为Windows平台 最后 前言 鉴于 rust 中文资料较少&#xff0c;遇到问题的解决方案更少。这里记录遇到的一些问题。 Rust 支持交叉编译&#xff0c;可以在 macOS 平台编译出 Linux 或者…

机器学习——CBOW基于矩阵(手动实操)

基于矩阵的CBOW基础算法&#xff0c;其实是负采样的前提算法。 主要是根据 预测准确率为22%左右 说实话。。。我已经很满意了&#xff0c;至少这个东西是可以去预测的&#xff0c;至于预测为什么不正确&#xff0c;我目前猜测主要还是跟词频有关。 在结果中&#xff0c;an…

uniapp:启动图 .9png 制作教程

1、工具安装&#xff1a;自行下载Android Studio 2、制作.9png 注意上图3条黑线的位置&#xff0c;意思是&#xff1a;标注黑线的位置可以进行缩放。 对其大多数启动图来说&#xff0c;标注以上3条黑线即可。

一周掌握【机器学习】入门知识

学习目标&#xff1a; 一周掌握 机器学习 入门知识 学习内容&#xff1a; 1.了解机器学习的基本概念&#xff1a; 阅读由 Keras 的创建者 Francois Chollet 编著的《使用 Python进行深度学习》。这本书从程序员的角度介绍了机器学习的基础知识。您可以阅读第 1-4 章&#xff…

ETH开源PPO算法学习

前言 项目地址&#xff1a;https://github.com/leggedrobotics/rsl_rl 项目简介&#xff1a;快速简单的强化学习算法实现&#xff0c;设计为完全在 GPU 上运行。这段代码是 NVIDIA Isaac GYM 提供的 rl-pytorch 的进化版。 下载源码&#xff0c;查看目录&#xff0c;整个项目…

创新之巅 健康之选 森歌集成灶智能水洗新揭秘

2024年2月27日&#xff0c;一场引领智能厨电风潮的盛会在杭州隆重召开。森歌集成灶以“勠力同心 共生共歌”为主题&#xff0c;成功举办了2024森歌智能厨电优秀经销商峰会。此次峰会上&#xff0c;森歌集成灶发布了令人瞩目的奥运冠军同款智能厨电新品——森歌鲸洗小灶Z60&…

前端架构: 脚手架之多package项目管理和架构

多package项目管理 1 &#xff09;多package项目管理概述 通常来说&#xff0c;当一个项目变大了以后&#xff0c;我们就要对这个项目进行拆分在前端当中&#xff0c;对于项目进行拆分的方式&#xff0c;通常把它称之为javascript包管理需要使用一个工具叫做 npm (Node Packag…

JS二进制文件转换:File、Blob、Base64、ArrayBuffer

类型转换 1. Blob、File → Base64 function fileToDataURL(file) {let reader new FileReader();reader.readAsDataURL(file);reader.onload function (e) {return reader.result;}; }2. Base64 → Blob、File // Base64 转为 Blob function dataURLToBlob(fileDataURL) …

【服务器磁盘清理技巧】

服务器磁盘空间的管理是一个非常重要的系统管理员工作。大量的日志文件、临时文件、备份文件等可能会迅速填满你的磁盘空间&#xff0c;导致应用无法正常运行。因此&#xff0c;磁盘空间的清理和管理就显得非常重要。 本文将介绍一些在Linux服务器上清理磁盘空间的基本技巧。 …

Java开发的核心模式 - MVC

文章目录 1、MVC设计模式2、Web开发本质3、服务器的性能瓶颈 1、MVC设计模式 MVC设计模式示意图 在整个Java学习之旅中&#xff0c;MVC&#xff08;Model-View-Controller&#xff09;设计模式无疑占据着极其重要的地位&#xff0c;堪称理解和掌握Java项目开发精髓的钥匙。如…

Python Pandas处理金额注意事项和案例

使用 Python 的 Pandas 库处理金额时&#xff0c;有几个注意事项可以帮助确保准确性和避免常见的问题&#xff1a; 注意事项 使用适当的数据类型: 金额通常应该使用定点数来表示&#xff0c;以避免浮点数运算中的舍入误差。可以使用 decimal.Decimal 类型来保持高精度。 避免…

IP源防攻击IPSG(IP Source Guard)

IP源防攻击IPSG&#xff08;IP Source Guard&#xff09;是一种基于二层接口的源IP地址过滤技术&#xff0c;它能够防止恶意主机伪造合法主机的IP地址来仿冒合法主机&#xff0c;还能确保非授权主机不能通过自己指定IP地址的方式来访问网络或攻击网络。 2.1 IPSG基本原理 绑定…

关于delphi6提示[Fatal Error] File not found: ‘System.pas‘

关于delphi6提示[Fatal Error] File not found: System.pas 一、[Fatal Error] File not found: System.pas的原因 1、System.dcu的输出没有覆盖项目引用路径..\..\dcu下 2、注意事项&#xff1a;System.pas等源码不能赋值到..\..\dcu 3、下述控件的Tools-Environment Optio…

android嵌入式开发及实训答案,android面试简历模板

前言 本想今年辞掉工作大干一场&#xff0c;没想到碰到疫情&#xff0c;家里蹲了3个月…&#xff0c;还好字节能给一次机会。前阵子字节跳动的提前批开始了&#xff0c;看宣传是说有海量HC&#xff0c;机会多多&#xff0c;本着涨涨面经的心理&#xff0c;然后就投递了一下杭州…

如何利用ChatGPT搞科研?论文检索、写作、基金润色、数据分析、科研绘图(全球地图、植被图、箱型图、雷达图、玫瑰图、气泡图、森林图等)

以ChatGPT、LLaMA、Gemini、DALLE、Midjourney、Stable Diffusion、星火大模型、文心一言、千问为代表AI大语言模型带来了新一波人工智能浪潮&#xff0c;可以面向科研选题、思维导图、数据清洗、统计分析、高级编程、代码调试、算法学习、论文检索、写作、翻译、润色、文献辅助…

车规级存储芯片SPI NOR Flash

国产SPI NOR Flash厂家聚辰提供多种容量选择&#xff0c;可满足多种实时操作系统所需的不同存储空间&#xff1b;并且&#xff0c;拥有四种不同电压范围&#xff0c;分别为3V、1.8V、1.2V以及针对电池供电应用推出的1.65V~3.6V宽压供电的产品系列&#xff1b;同时&#xff0c;提…