路由:
哈希路由(在url地址后加 #name)
// 实现页面监听
window.onhashchange = function(){
console.log(‘hash:’,window.location.hash)
}
H5路由(history.pushState(‘起的名字’, ‘title字段’, ‘跳转的地址’))
H5路由高级的地方就是可以跳转一个hash值,也可以跳转一个路径,且跳转路径时页面不会刷新
// 实现页面监听
window.onpopstate = function (e) {
console.log(‘H5:’, window.location.pathname)
}
还有一个特殊的 history.replaceState,它和 history.pushState 调用方式一样。唯一的区别是pushState是在历史记录栈推送一条记录,而replaceState是替换当前的历史记录栈,不会更改其他的历史记录。
React和路由相关的元素:
// 哈希路由
<HashRouter> // H5路由
<BrowserRouter> // 路由规则
<Route> // 路由选项
<Switch> // 跳转导航
<Link> || <NavLink> // 自动跳转
<Redirect>
绝对路径的引用
相信很多童鞋在React中出现过引用过长的问题
举个
React路由 + 绝对路径引用的更多相关文章
-
react路由的安装及格式和使用方法
react路由的安装: 在要创建项目的目录命令窗里输入: cnpm install -g create-react-app create-react-app 项目名 在创建好的项目目录命令窗里输入: ...
-
react路由嵌套
所谓的嵌套路由就是在某些以及路由下面存在二级路由,这些二级路由除了公用一级路由导航模块外,还公用当前的二级路由的导航模块,也就是部分进行了切换,要实现嵌套路由,首先回顾之前的内容,实现基本的react ...
-
react 路由 react-router@3.2.1
react路由,4.x的差异还是比较大,暂时还是3.x的版本 安装: npm install -S react-router@3.x 配置: import { Router, Route, hashH ...
-
React路由配置
React路由简单配置 //入口文件index.js import React from 'react'; import ReactDom from 'react-dom'; import { Rou ...
-
React 路由&;脚手架
1.创建react项目 npm install -g create-react-app 全局环境 create-react-app my-app 创建项目 cd my-app 进入项目 npm sta ...
-
【React 8/100】 React路由
React路由 React路由介绍 现代的前端应用大多数是SPA(单页应用程序),也就是只有一个HTML页面的应用程序.因为它的用户体验更好.对服务器压力更小,所以更受欢迎.为了有效的使用单个页面来管 ...
-
我的一个react路由之旅(步骤及详图)
今天开始react一个重要部分的xiao~习,路由~(过程截图,最后附代码) 以下代码只能骗糊涂蛋子,没错,就是我自己,不要打算让我敲出多高级的东西~ 理论性知识几乎没有,请不要打算让我给你说原理啥的 ...
-
我的一个React路由嵌套(多级路由),路由传参之旅
在上一篇react路由之旅中,我们简单地配置了react,进行了react路由及相关知识的学习,引入以及实现一个局部跳转的功能,接下来就是深入学习路由的嵌套以及传参,这是工作中主要用要的. 我的rea ...
-
解决React路由URL中hash(#)部分的显示 、browserHistory打包后浏览器刷新页面出现404的问题
摘要 在React项目中,我们需要采用它的路由库React-Router来进行页面跳转,React会根据路由URL来判断是哪个页面.常见的的URL有两种显示方式,一种是hashHistory的形式,形 ...
随机推荐
-
C# 读取CSV文件
CSV文件是用逗号作为分隔符的,所以如果是简单的CSV文件,用split(',')就可以了. 但是Excel 编辑CSV文件,且内容中有逗号,得到的csv文件如下:"aaa,aaa" ...
-
查看那个进程占用了端口号(LINUX与AIX)
在LINUX中: netstat命令 [root@limt ~]# netstat -tulp Active Internet connections (only servers) Proto Rec ...
-
SDUT2142数据结构实验之图论二:基于邻接表的广度优先搜索遍历
http://acm.sdut.edu.cn/sdutoj/showproblem.php?pid=2142&cid=1186 题目描述 给定一个无向连通图,顶点编号从0到n-1,用广度优先搜 ...
-
IPv6 tutorial – Part 5: Address types and global unicast addresses
https://4sysops.com/archives/ipv6-tutorial-part-5-address-types-and-global-unicast-addresses/ In my ...
-
debug连线指令
-當發現原本正常的連線突然斷線的,請用底下的指令debug 1.ifconfig (看看IPaddress) 2.wpa_clira stat (看看連線狀態) 3.如果是在連線中(wp ...
-
js-浏览器DOM
1.window尺寸 适配所有浏览器的尺寸方案 var w=window.innerWidth|| document.documentElement.clientWidth|| document.bo ...
-
Dubbo源码学习--集群负载均衡算法的实现
相关文章: Dubbo源码学习文章目录 前言 Dubbo 的定位是分布式服务框架,为了避免单点压力过大,服务的提供者通常部署多台,如何从服务提供者集群中选取一个进行调用, 就依赖Dubbo的负载均衡策 ...
-
求解释一个蛋疼的bug
大婶儿们出来解决个问题,看看有碰见过的没 截图中的 if (order.EShopOrder_PayStatus == 0 && order.EShopOrder_Status == ...
-
Linux中vim文本编辑器的介绍和使用方法
vim主要模式介绍,vim命令模式. 确保系统已经安装了VIM工具 [root@panda ~]# rpm -qf `which vim` [root@panda ~]# rpm -qf `which ...
-
MR架构
MapReduce框架结构 Map/Reduce是一个用于大规模数据处理的分布式计算模型,它最初是由Google工程师设计并实现的,Google已经将它完整的MapReduce论文公开发布了.其中对它 ...