React路由 + 绝对路径引用

时间:2022-01-30 23:49:47

路由:

哈希路由(在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路由 + 绝对路径引用的更多相关文章

  1. react路由的安装及格式和使用方法

    react路由的安装: 在要创建项目的目录命令窗里输入: cnpm install -g create-react-app create-react-app  项目名 在创建好的项目目录命令窗里输入: ...

  2. react路由嵌套

    所谓的嵌套路由就是在某些以及路由下面存在二级路由,这些二级路由除了公用一级路由导航模块外,还公用当前的二级路由的导航模块,也就是部分进行了切换,要实现嵌套路由,首先回顾之前的内容,实现基本的react ...

  3. react 路由 react-router&commat;3&period;2&period;1

    react路由,4.x的差异还是比较大,暂时还是3.x的版本 安装: npm install -S react-router@3.x 配置: import { Router, Route, hashH ...

  4. React路由配置

    React路由简单配置 //入口文件index.js import React from 'react'; import ReactDom from 'react-dom'; import { Rou ...

  5. React 路由&amp&semi;脚手架

    1.创建react项目 npm install -g create-react-app 全局环境 create-react-app my-app 创建项目 cd my-app 进入项目 npm sta ...

  6. 【React 8&sol;100】 React路由

    React路由 React路由介绍 现代的前端应用大多数是SPA(单页应用程序),也就是只有一个HTML页面的应用程序.因为它的用户体验更好.对服务器压力更小,所以更受欢迎.为了有效的使用单个页面来管 ...

  7. 我的一个react路由之旅(步骤及详图)

    今天开始react一个重要部分的xiao~习,路由~(过程截图,最后附代码) 以下代码只能骗糊涂蛋子,没错,就是我自己,不要打算让我敲出多高级的东西~ 理论性知识几乎没有,请不要打算让我给你说原理啥的 ...

  8. 我的一个React路由嵌套(多级路由),路由传参之旅

    在上一篇react路由之旅中,我们简单地配置了react,进行了react路由及相关知识的学习,引入以及实现一个局部跳转的功能,接下来就是深入学习路由的嵌套以及传参,这是工作中主要用要的. 我的rea ...

  9. 解决React路由URL中hash&lpar;&num;&rpar;部分的显示 、browserHistory打包后浏览器刷新页面出现404的问题

    摘要 在React项目中,我们需要采用它的路由库React-Router来进行页面跳转,React会根据路由URL来判断是哪个页面.常见的的URL有两种显示方式,一种是hashHistory的形式,形 ...

随机推荐

  1. C&num; 读取CSV文件

    CSV文件是用逗号作为分隔符的,所以如果是简单的CSV文件,用split(',')就可以了. 但是Excel 编辑CSV文件,且内容中有逗号,得到的csv文件如下:"aaa,aaa&quot ...

  2. 查看那个进程占用了端口号(LINUX与AIX)

    在LINUX中: netstat命令 [root@limt ~]# netstat -tulp Active Internet connections (only servers) Proto Rec ...

  3. SDUT2142数据结构实验之图论二:基于邻接表的广度优先搜索遍历

    http://acm.sdut.edu.cn/sdutoj/showproblem.php?pid=2142&cid=1186 题目描述 给定一个无向连通图,顶点编号从0到n-1,用广度优先搜 ...

  4. IPv6 tutorial – Part 5&colon; Address types and global unicast addresses

    https://4sysops.com/archives/ipv6-tutorial-part-5-address-types-and-global-unicast-addresses/ In my ...

  5. debug连线指令

    -當發現原本正常的連線突然斷線的,請用底下的指令debug 1.ifconfig      (看看IPaddress) 2.wpa_clira stat   (看看連線狀態) 3.如果是在連線中(wp ...

  6. js-浏览器DOM

    1.window尺寸 适配所有浏览器的尺寸方案 var w=window.innerWidth|| document.documentElement.clientWidth|| document.bo ...

  7. Dubbo源码学习--集群负载均衡算法的实现

    相关文章: Dubbo源码学习文章目录 前言 Dubbo 的定位是分布式服务框架,为了避免单点压力过大,服务的提供者通常部署多台,如何从服务提供者集群中选取一个进行调用, 就依赖Dubbo的负载均衡策 ...

  8. 求解释一个蛋疼的bug

     大婶儿们出来解决个问题,看看有碰见过的没 截图中的 if (order.EShopOrder_PayStatus == 0 && order.EShopOrder_Status == ...

  9. Linux中vim文本编辑器的介绍和使用方法

    vim主要模式介绍,vim命令模式. 确保系统已经安装了VIM工具 [root@panda ~]# rpm -qf `which vim` [root@panda ~]# rpm -qf `which ...

  10. MR架构

    MapReduce框架结构 Map/Reduce是一个用于大规模数据处理的分布式计算模型,它最初是由Google工程师设计并实现的,Google已经将它完整的MapReduce论文公开发布了.其中对它 ...