React路由 + 绝对路径引用
路由:
哈希路由(在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 路由
其他章节请看: 七天接手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 ...
随机推荐
- TCP/IP 笔记 - 超时和重传
TCP协议为了提供可靠的数据传输服务,会启动数据重传来解决下层网络层(IP)可能出现的数据包丢失. 超时重传介绍 TCP重传由两套独立机制来完成重传,基于时间的超时重传(RTO,TCP发送数据时会设置 ...
- centos6.10搭建ELK之elasticsearch6.5.4
1.环境准备 1.1.安装java环境版本不要低于java8 # java -version java version "1.8.0_191" Java(TM) SE Runtim ...
- lucene-solr源码编译导入eclipse--转
https://www.jianshu.com/p/8a217ce05475 github地址:https://github.com/apache/lucene-solr 第一步:git clone ...
- JavaWeb学习(二十九)———— 事务
一.事务的概念 事务指逻辑上的一组操作,组成这组操作的各个单元,要不全部成功,要不全部不成功. 例如:A——B转帐,对应于如下两条sql语句 update from account set mone ...
- 趁webpack5还没出,先升级成webpack4吧
上一次将webpack1升级到3,也仅是 半年前,前端工具发展变化太快了,如今webpack4已经灰常稳定,传说性能提升非常高,值得升级. 一直用着的webpack3越来越慢,一分多钟的编译时间简直不 ...
- vb.net 日期時間
Dim dMyDate As DateTime = DateTime.Now‘當前時間日期 DateDiff("h", C13, C3)’ 二時間差 ‘日期格式 C2 = Form ...
- [android] 手机卫士手机定位的原理
手机定位的三种方式:网络定位,基站定位,GPS定位 网络定位,手机连上wifi 2g 3g的时候,手机会有一个ip,误差很大 基站定位,精确度与基站的多少有关,几十米到几公里的误差 GPS定位,至少需 ...
- Vsftpd+Tengine+SpringMVC实现上传图片
第三部分:SpringMVC实现上传 1.1 思路 (1)使用SpringMVC上传组件,从页面表单接收图片 (2)使用vsftpd组件,将图片上传到Linux服务器 a.服务端:在Linux上安装f ...
- vue VNode如何使用,是什么东西?
前言:element ui 中有些 demo 使用了 vue 的 VNode,但是 demo 毕竟不全,所以想要了解 VNode 到底是什么,如何写出符合自己业务的代码. vue 官网介绍:渲染函数 ...
- C# 特性学习笔记
1.自己定义的特性 注意注释!!!!! 2.使用特性 3.特性的用处